1

Как установить max количество вводимых чисел в input type="number"? Вот мой код:

if(isMobile.Android()){
    $('#cardNumber').attr('type', 'number').attr('max', '19').attr('min', '15');
    $('#cardCode').attr('type', 'number').attr('max', '3').attr('min', '3');
}

Необходимо реализовать невозможность ввести большее количество чисел чем установлено, т.е. не просто вывести сообщение о превышении количества чисел, а именно не дать возможность ввести большее количество чисел чем установлено.

UPD

Код необходим только для os android

Сделала так:

if(isMobile.Android()){
    $('#cardNumber').attr('type', 'number').attr('max', '19').attr('min', '15');
    $('#cardCode').attr('type', 'number').attr('max', '3').attr('min', '3');

    var cardMax = 4;
    $(document).on('input paste', '#cardCode', function(){
        if ($(this).val().length >= cardMax)
            return false;
    });
}

Но код не работает, что не так?

8
  • Повесьте событие onkeyup на тот инпут, где надо проверять. В этом событии если длина символов > max, то обрезать последние.......либо keydown и тогда если количество символов > max - return false 6 апр 2016 в 5:37
  • это решение будет работать на android?
    – siberian
    6 апр 2016 в 5:38
  • @MarinaVoronova на мобильных устройствах будут работать события input и paste ru.stackoverflow.com/questions/505441 6 апр 2016 в 5:42
  • jsfiddle.net/jnhmc4d1 только раз андройд - сделайте paste как написал Василий 6 апр 2016 в 5:44
  • @АлексейШиманский ну можно сразу использовать эти события (input, paste), они только в старых IE не работают, для IE под условием нужно слушать события как раз таки keyUp, keyDown. Причем событие input работает лучше и прямей чем keyUp. Сколько же с ними было проблем) 6 апр 2016 в 5:54

1 ответ 1

1

Я использую такую конструкцию:

<input type="text"
    onKeyDown="if(this.value.length==2) this.value = this.value.slice(0,-1)"
/>

Ограничение в два символа


UPD1

HTML

<input type="text" class="maxlimit" data-max="2"/>

JS

$('input.maxlimit').keydown(function(){
    var max = $(this).data('max');
    if( this.value.length==max ) this.value = this.value.slice(0,-1)
});

Не проверял, но должно работать, возможны орфографические ошибки


UPD2

HTML 5

<input type="tel" class="maxlimit" data-max="8" pattern=".{4,}"/>

JS

$('input.maxlimit').keydown(function(){
    var max = $(this).data('max');
    if( this.value.length==max ) this.value = this.value.slice(0,-1)
});

Не проверял, но должно работать, возможны орфографические ошибки

Добавление потерна не даст отправить форму, если данные не соответствуют шаблону.
Но это лишь только верхушка айсберга.
Вам, как полагаю, более плотно надо подойти к валидации данных, и ограничение на макс длину/кол-во символом это только начало...

Про валидацию не знаю что и сказать, все зависит от задачи и инструментов, что используете.

Для jQuery можно присматреться в этому плагину (сам не использовал).
В Angular можно вполне обойтись штатными средствами.
Кто то пишет свои решения.
Кому то и второго варианта хватает.


UPD3
Попробуйте что то вроде:

$('input.maxlimit').keydown(function(){
    var max = $(this).data('max');
    var keyCode = event.keyCode;
    if( keyCode!=8 && keyCode!=46 && this.value.length==max ) this.value = this.value.slice(0,-1)
    console.log(keyCode); /// OR alert(keyCode);
});

8 - backspace, 46 - delete, как в андроид не знаю.
Отловите нужные коды с помощью консоли или того же алерта.

10
  • а как это в файле js прописать? просто необходимо обращаться к html из файла со скриптами
    – siberian
    6 апр 2016 в 6:34
  • Добавил вариант под UPD
    – borodatych
    6 апр 2016 в 6:44
  • а этот код применим для указания минимального количества чисел?
    – siberian
    6 апр 2016 в 7:04
  • Нет не подойдет. Добавил еще вариант. Уточните что вы хотите сделать и получить. Что должно происходить если вводимое число не укладывается в допустимы рамки?
    – borodatych
    6 апр 2016 в 7:53
  • валидатор есть. вообще эти поля маскируются плагином maskedinput. но для android не подходит ru.stackoverflow.com/questions/509609/… поэтому я для android отключила маскирование и делаю валидацию на max и min количество символов
    – siberian
    6 апр 2016 в 7:54

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.