Как ограничить количество символов, которые можно ввести в поле ввода номера HTML5 на iPhone

Question

Кажется, что ни один из атрибутов HTML "maxlength", "min" или "max" не оказывает желаемого эффекта на iPhone для следующей разметки:

 <input type="number" maxlength="2" min="0" max="99"/>

Вместо того, чтобы ограничивать количество цифр или значение введенного номера, номер остается таким же, каким он был введен на iPhone 4. Эта разметка работает на большинстве других протестированных нами телефонов.

Что дает?

Есть ли обходные пути?

Если это важно для решения, мы используем jQuery mobile.

Спасибо!

Answer 1

Пример

JS

function limit(element)
{
    var max_chars = 2;

    if(element.value.length > max_chars) {
        element.value = element.value.substr(0, max_chars);
    }
}

HTML

<input type="number" onkeydown="limit(this);" onkeyup="limit(this);">

Если вы используете jQuery, вы можете немного привести в порядок JavaScript:

JS

var max_chars = 2;

$('#input').keydown( function(e){
    if ($(this).val().length >= max_chars) { 
        $(this).val($(this).val().substr(0, max_chars));
    }
});

$('#input').keyup( function(e){
    if ($(this).val().length >= max_chars) { 
        $(this).val($(this).val().substr(0, max_chars));
    }
});

HTML

<input type="number" id="input">

Answer 2

Согласно MDN , maxlength не используется в течение number с. Вы пробовали только:

<input type="number" min="0" max="99" />

OR

<input type="range" min="0" max="99" />

Answer 3

Вы можете использовать этот код:

<input type="number" maxlength="2" min="0" max="99"
       onkeypress="limitKeypress(event,this.value,2)"/>

и JS код:

function limitKeypress(event, value, maxLength) {
    if (value != undefined && value.toString().length >= maxLength) {
        event.preventDefault();
    }
}

Answer 4

Проверьте это, это работает для меня;

Есть ли в HTML5 атрибут проверки минимальной длины?

Answer 5

Еще один вариант с jQuery, но событие onkeypress ...;)

$("input[type=number]").on('keypress',function(e) { 
    var $that = $(this),
    maxlength = $that.attr('maxlength')
    if($.isNumeric(maxlength)){
        if($that.val().length == maxlength) { e.preventDefault(); return; }

        $that.val($that.val().substr(0, maxlength));
    };
});

Answer 6

Здесь более оптимизированная версия jQuery, которая кэширует селекторы. Он также использует атрибут maxlength, который не поддерживается номером типа ввода.

// limits the input based on the maxlength attribute, this is by default no supported by input type number
$("input[type=number]").on('keydown keyup',function(){ 
    var $that = $(this),
    maxlength = $that.attr('maxlength')
    if($.isNumeric(maxlength)){
        $that.val($that.val().substr(0, maxlength));
    };
});

Answer 7

Вы можете использовать JavaScript для проверки количества символов в поле и, если их слишком много, удалите один из них: http://www.webcodingtech.com/javascript/limit-input-text.php

Answer 8

как сказал Эндрю, вам нужно изменить тип на диапазон, кроме того, у вас будут проблемы с IE и FF и, возможно, со старым браузером ipad, потому что это из HTML 5, и это «Kind New».Посмотрите на этого человека, который пробовал диапазон с JS, Укажите диапазон чисел для ввода в числовое поле, используя javascript

Answer 9

Это ответ Tripex, оптимизированный для разрешения удаления ключа, работает при наборе текста и вставке.

$(document).on("keyup", "#your_element", function(e) {
    var $that = $(this),
    maxlength = $that.attr('maxlength');
    if ($.isNumeric(maxlength)){
        if($that.val().length === maxlength) {
            e.preventDefault();
            // If keyCode is not delete key 
            if (e.keyCode !== 64) {
                return;
            }
        }
        $that.val($that.val().substr(0, maxlength));
    }
});

Answer 10

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

В отличие от этого, я предложу другой способ, который похож на Уилл, но он лучше, так как предотвращает показ персонажа. Также я добавил блок else if, чтобы проверить, является ли символ числом, и тогда это хорошая функция для проверки числовых полей.

HTML

<input type="number" onkeydown="limit(this);">

JS

function limit(element)
{
    var max_chars = 2;
    if (arguments[1].char !== "\b" && arguments[1].key !== "Left" && arguments[1].key !== "Right") {
        if (element.value.length >= max_chars) {
            return false;
        } else if (isNaN(arguments[1].char)) {
            return false;
        }
    }
}