AlexanderKomkov/index.html

## index.html
<!DOCTYPE HTML>
<html lang="ru">
<head>
    <title>Тест</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        a {
            text-decoration: none;
        }

        #info {
            position: absolute;
            top: 13px;
            left: 400px;
            background-color: #ddd;
            padding: 0px 40px;
            max-height: 500px;
            width: 201px;
            overflow: auto;
        }

        p {
            margin: 10px 0;
        }

		/* Webkit браузеры */

		input[type=number]::-webkit-inner-spin-button,
		input[type=number]::-webkit-outer-spin-button {
			-webkit-appearance: none;
		    margin:0;
		}

		/* IE */

		input[type=number]::-ms-clear {
			display: none;
		}

		/* Mozila */

		input[type=number] {
			-moz-appearance:textfield;
		}

    </style>
</head>
<body>
    <a href="#" data-for='first' data-event='sub'>Уменьшить</a>
    <input id='first' min='1' max='10' step='0.45' type='number' value='1.5'>
    <a href="#" data-for='first' data-event='add'>Увеличить</a>
    <br/>
    <br/>
    <br/>
    <a href="#" data-for='two' data-event='sub'>-</a>
    <input id='two' type='number' value='15'>
    <a href="#" data-for='two' data-event='add'>+</a>
     <br/>
    <br/>
    <br/>
    <a href="#" data-for='three' data-event='sub'>prev</a>
    <input id='three' type='number' step='0.5' min="10" value='10'>
    <a href="#" data-for='three' data-event='add'>next</a>

    <div id="info"><p>История:</p><div id="history"></div></div>

    <script src="jquery.min.1.11.0.js" type="text/javascript"></script>
 	<script src="stylernumber.js" type="text/javascript"></script>
    <script type="text/javascript">
    $("input[type='number']").stylerNumber();

    $("input[type='number']").on("change", function() {
        $("#history").prepend("<p>Форма " + $(this).attr("id") + " изменена</p>");
    });


    </script>
</body>
</html>

## stylernumber.js
/*
*	Styler number
*/

(function($) {

	$.fn.stylerNumber = function() {

		var styler = function() {

			var id;
			var min = false;
			var max = false;
			var step = 1;
			var self = $(this);

			if (self.attr('id')) {
				id = self.attr('id');
			}
			else {
				return;
			}
			if (self.attr('min')) {
				min = self.attr('min');
			}
			if (self.attr('max')) {
				max = self.attr('max');
			}
			if (self.attr('step')) {
				if (getLengthDecimal(self.attr('step')) >= 0 && getLengthDecimal(self.attr('step')) <= 20)
				step = Number(self.attr('step'));
				else return;
			}

			function getLengthDecimal(number) {
			    var number = new String(number);
			    var pos = number.indexOf(".");
			    if (pos == -1) return 0;
			    number = number.substr(pos + 1);
			    number = Number(number.length);
			    return number;
			}

			$("[data-for='" + id + "']").on("selectstart", function(even) {
				return false;
			});

			$("[data-for='" + id + "']").on("click", function(event) {
				var e = $(this).attr("data-event");
				var f = $(this).attr("data-for");
				if (!f || !e) return false;
				if (e == "sub") {
					var value = Number(self.val());
					var newvalue = Number((value - step).toFixed(getLengthDecimal(step)));
					if (!min) {
						self.val(newvalue);
						self.change();
					}
					else if (newvalue >= min) {
						self.val(newvalue);
						self.change();
					}
				} else if (e == "add") {
					var value = Number(self.val());
					var newvalue = Number((value + step).toFixed(getLengthDecimal(step)));
					if (!max) {
						self.val(newvalue);
						self.change();
					}
					else if (newvalue <= max) {
						self.val(newvalue);
						self.change();
					}
				}
				return false;
			});
		};
		return this.each(styler);
	};

})	($);
	<!DOCTYPE HTML>
	<html lang="ru">
	<head>
	<title>Тест</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style>
	a {
	text-decoration: none;
	}

	#info {
	position: absolute;
	top: 13px;
	left: 400px;
	background-color: #ddd;
	padding: 0px 40px;
	max-height: 500px;
	width: 201px;
	overflow: auto;
	}

	p {
	margin: 10px 0;
	}

	/* Webkit браузеры */

	input[type=number]::-webkit-inner-spin-button,
	input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin:0;
	}

	/* IE */

	input[type=number]::-ms-clear {
	display: none;
	}

	/* Mozila */

	input[type=number] {
	-moz-appearance:textfield;
	}

	</style>
	</head>
	<body>
	<a href="#" data-for='first' data-event='sub'>Уменьшить</a>
	<input id='first' min='1' max='10' step='0.45' type='number' value='1.5'>
	<a href="#" data-for='first' data-event='add'>Увеличить</a>
	<br/>
	<br/>
	<br/>
	<a href="#" data-for='two' data-event='sub'>-</a>
	<input id='two' type='number' value='15'>
	<a href="#" data-for='two' data-event='add'>+</a>
	<br/>
	<br/>
	<br/>
	<a href="#" data-for='three' data-event='sub'>prev</a>
	<input id='three' type='number' step='0.5' min="10" value='10'>
	<a href="#" data-for='three' data-event='add'>next</a>

	<div id="info"><p>История:</p><div id="history"></div></div>

	<script src="jquery.min.1.11.0.js" type="text/javascript"></script>
	<script src="stylernumber.js" type="text/javascript"></script>
	<script type="text/javascript">
	$("input[type='number']").stylerNumber();

	$("input[type='number']").on("change", function() {
	$("#history").prepend("<p>Форма " + $(this).attr("id") + " изменена</p>");
	});


	</script>
	</body>
	</html>
	/*
	* Styler number
	*/

	(function($) {

	$.fn.stylerNumber = function() {

	var styler = function() {

	var id;
	var min = false;
	var max = false;
	var step = 1;
	var self = $(this);

	if (self.attr('id')) {
	id = self.attr('id');
	}
	else {
	return;
	}
	if (self.attr('min')) {
	min = self.attr('min');
	}
	if (self.attr('max')) {
	max = self.attr('max');
	}
	if (self.attr('step')) {
	if (getLengthDecimal(self.attr('step')) >= 0 && getLengthDecimal(self.attr('step')) <= 20)
	step = Number(self.attr('step'));
	else return;
	}

	function getLengthDecimal(number) {
	var number = new String(number);
	var pos = number.indexOf(".");
	if (pos == -1) return 0;
	number = number.substr(pos + 1);
	number = Number(number.length);
	return number;
	}

	$("[data-for='" + id + "']").on("selectstart", function(even) {
	return false;
	});

	$("[data-for='" + id + "']").on("click", function(event) {
	var e = $(this).attr("data-event");
	var f = $(this).attr("data-for");
	if (!f \|\| !e) return false;
	if (e == "sub") {
	var value = Number(self.val());
	var newvalue = Number((value - step).toFixed(getLengthDecimal(step)));
	if (!min) {
	self.val(newvalue);
	self.change();
	}
	else if (newvalue >= min) {
	self.val(newvalue);
	self.change();
	}
	} else if (e == "add") {
	var value = Number(self.val());
	var newvalue = Number((value + step).toFixed(getLengthDecimal(step)));
	if (!max) {
	self.val(newvalue);
	self.change();
	}
	else if (newvalue <= max) {
	self.val(newvalue);
	self.change();
	}
	}
	return false;
	});
	};
	return this.each(styler);
	};

	}) ($);