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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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