в input с цифрой добавить текст со склонением

[the_little]

Всем привет.

Есть поле input текстовое. На него вешается некий обработчик и добавляются плюс и минус рядом с полем, при нажатии на которые меняется значение поля (число).

Я не могу понять, как мне этот скрипт поправить, чтобы после числа выводился заданный текст со склонением. (пример во вложении)

Например
1 комната
2 комнаты
5 комнат

Это первый вопрос.

Есть второй... Таких полей на странице много. И у разных полей этот текст после цифры разный. Вариантов всего 5 (комната, санузел, час, шт. и никакого текста). Можно как то эти тексты в самих инпутах прописать или еще как то, чтобы скрипт был один. Или придется делать несколько скриптов под каждое слово после числа.

Выводится сейчас это все на бутстрапе.

<div class="input-group">
                  <span class="input-group-btn">
                      <button type="button" class="btn btn-default btn-number btn-minus" disabled="disabled" data-type="minus" data-field="quant[1]">
                          <i class="material-icons">remove</i>
                      </button>
                  </span>
                  <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="30">
                  <span class="input-group-btn">
                      <button type="button" class="btn btn-default btn-number btn-plus" data-type="plus" data-field="quant[1]">
                          <i class="material-icons">add</i>
                      </button>
                  </span>
              </div>

И скрипт который за это отвечает.

//plugin bootstrap minus and plus
//http://jsfiddle.net/laelitenetwork/puJ6G/
$('.btn-number').click(function(e){
    e.preventDefault();

    fieldName = $(this).attr('data-field');
    type      = $(this).attr('data-type');
    var input = $("input[name='"+fieldName+"']");
    var currentVal = parseInt(input.val());
    if (!isNaN(currentVal)) {
        if(type == 'minus') {

            if(currentVal > input.attr('min')) {
                input.val(currentVal - 1).change();
            }
            if(parseInt(input.val()) == input.attr('min')) {
                $(this).attr('disabled', true);
            }

        } else if(type == 'plus') {

            if(currentVal < input.attr('max')) {
                input.val(currentVal + 1).change();
            }
            if(parseInt(input.val()) == input.attr('max')) {
                $(this).attr('disabled', true);
            }

        }
    } else {
        input.val(0);
    }
});
$('.input-number').focusin(function(){
   $(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {

    minValue =  parseInt($(this).attr('min'));
    maxValue =  parseInt($(this).attr('max'));
    valueCurrent = parseInt($(this).val());

    name = $(this).attr('name');
    if(valueCurrent >= minValue) {
        $(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled')
    } else {
        alert('Sorry, the minimum value was reached');
        $(this).val($(this).data('oldValue'));
    }
    if(valueCurrent <= maxValue) {
        $(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled')
    } else {
        alert('Sorry, the maximum value was reached');
        $(this).val($(this).data('oldValue'));
    }

});
$(".input-number").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
             // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === true) ||
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });

Буду благодарен за помощь.
Моих знаний хватает, чтобы просто добавить там еще один объект (див или спан), выставить его так, чтобы выглядело что это в инпуте, считывать значение с инпута и выводить туда текст со склонением.
И я бы так и сделал, но есть нюанс. Поскольку числа могут быть и с 1 символом и с 2, то текст мой будет фиксированное положение иметь, и для маленьких чисел будет большой пробел оставаться между числом и текстом.

Но наверное есть вариант другой?

[j0hnik]

Обсуждалось недавно, вот почитайте темку.
https://javascript.ru/forum/misc/725...it-skript.html

[ksa]

Вот готовые решения...

[the_little]

Спасибо!
Сами функции склонения я видел и даже применял как-то))
Я не понимаю как это вставить в мой скрипт в нужное поле.

Например

input.val(currentVal - 1).change();

Как я понимаю тут уменьшается на 1 значение currentVal
Я же не могу тут написать

input.val(currentVal - 1 + " " + myvar).change();

[the_little]

И там же например текущее значение

var currentVal = parseInt(input.val());

По идее я и туда должен добавить свою текстовую переменную.

var currentVal = parseInt(input.val() + " " + myvar);

Хотя var currentVal должен в результате все равно вернуть число.

[j0hnik]

Не вникал во весь скрипт просто добавил две функции, посмотрите как устроено

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
	<div class="input-group">
		<span class="input-group-btn">
			<button type="button" class="btn btn-default btn-number btn-minus" disabled="disabled" data-type="minus" data-field="quant[1]">
				<i class="material-icons">remove</i>
			</button>
		</span>
		<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="30">
		<span class="input-group-btn">
			<button type="button" class="btn btn-default btn-number btn-plus" data-type="plus" data-field="quant[1]">
				<i class="material-icons">add</i>
			</button>
		</span>
	</div>

	<div id="res"></div>

	<script>

		f=(n, arr) => n+" "+arr[(n%100>4 && n%100<20)?2:[2, 0, 1, 1, 1, 2][(n%10<5)?n%10:5]];  
		var mass = ['комната', 'комнаты', 'комнат'];
		s=(val)=>$('#res').text(f(val, mass));

		//plugin bootstrap minus and plus
//http://jsfiddle.net/laelitenetwork/puJ6G/
$('.btn-number').click(function(e){
	e.preventDefault();

	fieldName = $(this).attr('data-field');
	type      = $(this).attr('data-type');
	var input = $("input[name='"+fieldName+"']");
	var currentVal = parseInt(input.val());
	if (!isNaN(currentVal)) {
		if(type == 'minus') {

			if(currentVal > input.attr('min')) {
				input.val(currentVal - 1).change();
			}
			if(parseInt(input.val()) == input.attr('min')) {
				$(this).attr('disabled', true);
			}

		} else if(type == 'plus') {

			if(currentVal < input.attr('max')) {
				input.val(currentVal + 1).change();
			}
			if(parseInt(input.val()) == input.attr('max')) {
				$(this).attr('disabled', true);
			}

		}
	} else {
		input.val(0);
	}
});
$('.input-number').focusin(function(){
	$(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {

	minValue =  parseInt($(this).attr('min'));
	maxValue =  parseInt($(this).attr('max'));
	valueCurrent = parseInt($(this).val());

	var mass = ['комната', 'комнаты', 'комнат'];

s(valueCurrent);

	name = $(this).attr('name');
	if(valueCurrent >= minValue) {
		$(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled')
	} else {
		alert('Sorry, the minimum value was reached');
		$(this).val($(this).data('oldValue'));
	}
	if(valueCurrent <= maxValue) {
		$(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled')
	} else {
		alert('Sorry, the maximum value was reached');
		$(this).val($(this).data('oldValue'));
	}

});
$(".input-number").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
             // Allow: Ctrl+A
             (e.keyCode == 65 && e.ctrlKey === true) ||
             // Allow: home, end, left, right
             (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
               return;
             }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        	e.preventDefault();
        }
      });



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

[the_little]

Не вникал во весь скрипт просто добавил две функции, посмотрите как устроено

Спасибо! Только вот вопрос можно ли сделать так, чтобы это выводилось непосредственно в инпуте? Или нужно все-таки этот див накладывать сверху?

[j0hnik]

Конечно можно!

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button>-</button><input type="text"><button>+</button><br>
	<button>-</button><input type="text"><button>+</button><br>
	<button>-</button><input type="text"><button>+</button><br>
	<script>

		var sklon = (n, arr) => n+" "+arr[(n%100>4 && n%100<20)?2:[2, 0, 1, 1, 1, 2][(n%10<5)?n%10:5]],
		ap = (val,n) => inp[n].value = sklon(val, arr[n]);

		var arr = [['комната', 'комнаты', 'комнат'],['санузел', 'санузла', 'санузлов'],['час', 'часа', 'часов']],
		inp = document.querySelectorAll('input');
		inp.forEach((el, i)=>{
			el.value = 0;
			var val;
			el.previousElementSibling.onclick = e => {
				val = parseInt(el.value);
				if (val > 0) val--;
				ap(val,i);
			};
			el.nextElementSibling.onclick = e => {
				val = parseInt(el.value);
				val++;
				ap(val,i);
			};
			el.onchange = e => {
				val = el.value;
				ap(parseInt(el.value),i);
			}
		});

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

[Dilettante_Pro]

j0hnik,
Только input теперь не input - в него вводить нельзя, только кнопочками

[j0hnik]

Dilettante_Pro,
теперь можно
Это обработчик oninput не давал вводить, перебивал на лету =(