Главная » Вебмастеру » Как сделать в input type кнопки «+» и «-» по бокам

Как сделать в input type кнопки «+» и «-» по бокам

2016-11-29 / Вр:09:11 / просмотров: 6666

Не знал, как назвать статью!
Но хорошо, что есть краткое описание, где я смогу хоть немного объяснить, что будет в этой статье.
Скажу сразу, что это полезно, если на сайте нужно вводить в поле цифры, например, в интернет-магазине для выбора количества товаров. По бокам формы для ввода цифр будут кнопки «+» и кнопка «-». При нажатии на кнопку «+», значение в поле с каждым кликом будет прибавляться на один. Так же и кнопка «-» будет отниматься с общего значения на один с каждым кликом до «0».
Вот так выглядит пример (поклацайте на «+» и «-»):

Теперь код.

CSS (это не обязательно):

#amount {
/* ширина поля */
width:25px;
}

Код JavaScript:

<script>
function change(objName, min, max, step) {
var obj = document.getElementById(objName);
var tmp = +obj.value + step;
if (tmp<min) tmp=min;
if (tmp>max) tmp=max;
obj.value = tmp;
}
</script>

Код HTML:

<input type="button" value="+" onClick="change('amount',0,10, 1);"/>
<input id="amount" type="text" value="1"/>
<input type="button" value="-" onClick="change('amount',0,10,-1);"/>

Ну, все, сохраняйте и смотрите, что получилось у вас!