EN Start a Project

Plugin for managing the amount of JQUERY, CSS. Instructions and examples

In this article we will show you how to make a block with a number that can be entered using the keyboard and adjusted using the plus/minus buttons. This method, for example, can be useful in online stores to indicate the number of units of a product being purchased.

Preparing for work

Watch DEMO        Download example

First, we need to write the simplest markup of our block in an html document.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Плагин</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <main>
        <div class="count">
              <span class="minus">—</span> 
              <input type="number" value="1">
              <span class="plus">+</span>
       </div>
    </main>
</body>
</html>

, Where

<input type="number" value="1">

input field of type number with the value “1”,

<span class="minus">—</span>
<span class="plus">+</span>

lowercase elements to further adjust the number in the input field.

Next, we’ll add some styles to make it look nice.

.count {
    display: flex; 
    justify-content: center;
    text-align: center;
    align-items: center;
    max-width: 90px;
    padding: 15px;
    background: #e8f0f6;
    border-radius: 30px;
}
.count input {
    width: 48px;
    border: none;
    border-bottom: 1px #404040 solid;
    background: transparent;
    text-align: center;
    padding: 0;
    margin: 0;
}
.count span {
    cursor: pointer;
}
.count .minus{
    font-size: 12px;
    margin-right: 10px;
}
.count .plus{
    margin-left: 10px;
}
input[type='number'] {
    -moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

, Where

input[type='number'] {
    -moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

needed to remove standard input field switches

button

 And now we have a beautiful block for entering a number and regulating it using buttons, but something is missing. We are missing a script that will connect our buttons with the input field and, in fact, will tell us why they are here. JavaScript and the JQuery library will help us with this. To implement this step of our task, we need to connect the standard JQuery library, in our case it is version 3.3.1. JQuery is a wonderful JavaScript Framework that impresses with its ease of understanding and ease of use. To begin with, you will need the framework itself; you can download it on the official JQuery website. Then it needs to be connected next to the CSS file connection in the following way:

<script src="/js/jquery-3.3.1.min.js"></script>

Next, let's move on to writing the code itself by inserting the “script” tag. As a rule, scripts are inserted at the end of the site body or after the selector in which they are used:

<script>
$('.minus').click(function () { // вызов функции при клике на элемент
     var $input = $(this).parent().find('input'); // объявление переменной и присвоение ей значения поля ввода
     var count = parseInt($input.val()) - 1; // объявление переменной, преобразование значения в число и уменьшение его на 1
     count = count < 1 ? 1 : count; // условие, которое говорит "Если значение переменной меньше 1 то запиываем 1"
     $input.val(count); // присвоение атрибута value переменной count переменной $input
});
$('.plus').click(function () { // вызов функции при клике на элемент
     var $input = $(this).parent().find('input'); // объявление переменной и присвоение ей значения поля ввода
     $input.val(parseInt($input.val()) + 1); // объявление переменной, преобразование значения в число и увеличение его на 1
});
</script>

, where we made it so that the value of the “value” attribute of the “input” element increases when you click on the plus and decreases when you click on the minus, and also set a limit so that it would not be possible to minus below one.

knopka2

Now, we will complicate the task a little and make sure that in the passive state the buttons disappear and only the number is visible, and when focusing or hovering over an element, this block is displayed in full. To do this, we need to add styles and a little script using JQ.

And so, first you need to add styles so that they take the following form:

.count {
    display: flex; 
    justify-content: center;
    text-align: center;
    align-items: center;
    max-width: 45px;
    max-height:45px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    padding: 15px;
    margin: auto;
    background: #e8f0f6;
    border-radius: 30px;
    -webkit-transition: max-width 0.5s;
    -moz-transition: max-width 0.5s;
    -o-transition: max-width 0.5s;
    transition: max-width 0.5s;
}
.count:hover,
.count.active {
    max-width: 110px;
    background: #fff;
    border: 1px #c2c2c2 solid;
}
.count:hover input,
.count.active input {
    border-bottom: 1px #404040 solid;
    margin-bottom: -1px;
}
.count input {
    width: 45px;
    border: none;
    background: transparent;
    text-align: center;
    padding: 0;
    margin: 0;
    margin-left: -3px;
}
.count span {
    cursor: pointer;
}
.count .minus{
    font-size: 12px;
    margin-right: 10px;
}
.count .plus{
    margin-left: 10px;
}
input[type='number'] {
    -moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

where we added box-sizing: border-box; - so that the width/height value is calculated taking into account the internal padding, overflow: hidden; - so that the block cuts off elements that go beyond its limit, margin: auto; - to align the block to the center and transition: max-width 0.5s; - so that the block opens animatedly. We also added styles for the hover effect and the effect when the block is active (which will work after adding the script written below).

knopka3

And so, the hover effect is already working, but this is not enough, we also need it to work when focusing, that is, when we click on an element, for example, to enter manually. To do this, we will add a script:

$( "input" ).focus(function() { // Вызов функции, когда выбран этот элемент
      $(this).parent().addClass('active'); // Добавление класса родителю этого элемента
});
$( "input" ).focusout(function() { // Вызов функции, когда фокус пропадает с выбранного элемента
       $(this).parent().removeClass('active'); // Удаление класса у родителя элемента
});

, where we add the class "active" to the parent element when the input field has focus, and remove it when the focus is lost. An element receives focus when the user clicks on it. Focus usually means "get ready to enter data on this element", this is a good time to initialize or load something. The point where focus is lost is when the user clicks somewhere else or presses Tab to move to the next form field.
As a result, we just see some number in a circle, but when we point at it or click on it, the block expands, showing buttons for adjusting it, as well as the ability to enter it manually using the keyboard.

Русский
Srpski
English