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

Ответ 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">

Ответ 2

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

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

ИЛИ

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

Ответ 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));
    };
});

Ответ 7

Другой вариант с jQuery, но onkeypress event...;)

$("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));
    };
});

Ответ 8

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

<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();
    }
}

Ответ 9

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

В отличие от этого, я предлагаю другой способ, похожий на Уилла, он просто лучше, так как он не позволяет персонажу быть показанным. Кроме того, я добавил блок 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;
        }
    }
}

Ответ 10

Это ответ 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));
    }
});