Почему <input type = "number" maxlength = "3" > не работает в Safari?

Мне нравится вводить максимум 3 символа. В Firefox все работает отлично, я могу написать только 3 числа внутри входа, но в сафари вы можете написать много чисел внутри.

Вы можете протестировать его в обоих браузерах следующим образом: http://flowplayer.org/tools/demos/validator/custom-validators.htm

На данный момент я понял это с помощью плагина validate, но только для интереса, который мне нравится знать, почему это не работает?

EDIT:

с этим он работает

<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>

answer: Как предотвратить письма внутри текстового элемента?

Ответ 1

Я сделал это с помощью:

<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>

а затем в JavaScript я запретил буквы:

$("#myField").keyup(function() {
    $("#myField").val(this.value.match(/[0-9]*/));
});

Ответ 2

Вы можете попробовать ввести user type = "text" и oninput, как показано ниже. Это позволит только номера.

<input type="text" maxlength="3" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

Ответ 3

В основном свойства Макс и Мин не поддерживаются в браузере Safari. Я не вижу недостатков в синтаксисе. Используете ли вы версию Safari версии 1.3+? или ниже этого? Поскольку свойство maxlength поддерживается из Safari 1.3 +.

Ответ 4

Я использовал что-то очень похожее на @Jules, за исключением того, что его не разрешат использовать ключи, такие как shift + home. Поскольку мы проверяем числа, я просто использовал isNaN в функции keyup.

$("#myField").keyup(function() {
    var e = $("#myField");
    if(isNaN(e.val())){
        e.val(e.val().match(/[0-9]*/));
    }
});

С...

<input id="#myField" inputmode="numeric" maxlength="3" pattern="([0-9]{3})" type="text" />

Ответ 5

Вот более простое решение. Для меня это сработало

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


$("#cvv").on("keypress", function(evt) {
  var keycode = evt.charCode || evt.keyCode;
  if (keycode == 46 || this.value.length==3) {
    return false;
  }
});

блок JS предотвратит "." (точка), чтобы один из них не мог поместить float. Мы сохраняем тип ввода как число, поэтому он будет только номером в качестве входного. Если длина значения равна 3, то она вернет значение false, поэтому длина ввода также будет ограничена.

Ответ 6

Использование длины onKeyDown может быть ограничено

<input type="number" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">

Счастливое кодирование:)

Ответ 7

https://jsfiddle.net/zxqy609v/8/

function fixMaxlength(inputNumber) {
  var maxlength = $(inputNumber).attr("maxlength");
    $(inputNumber).keyup(function (evt) {
    this.value = this.value.substring(0, maxlength);
    this.value = this.value.replace(/\D/g, '');
  });
}