BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Вебмастеру » Как сделать в 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);"/>

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Хайпер

    Нужная штука! Сейчас делаю магазин на плагине WP Shop. Плюс плагина – что очень простой. А минус, что местами какой-то недоделанный. Вот таких как раз кнопок +/- рядом с количеством товара там почему-то нет. Теперь будут)

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716