為什么是<input type=“number” maxlength=“3”>不能在 Safari 中工作？

Question

我喜歡輸入最多 3 個字符。 在 Firefox 中一切正常，我只能在輸入中寫入 3 個數字 - 但在 safari 中，您可以在其中寫入很多數字。

您可以在這兩個瀏覽器中測試它： http : //flowplayer.org/tools/demos/validator/custom-validators.htm

現在我用驗證插件實現了它 - 但只是為了興趣，我想知道為什么這不起作用？

編輯：

有了這個它的工作

<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]*/));
});

Answer 2

您可以嘗試用戶 type="text" 和 oninput 如下。 這只會讓數字。

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

Answer 3

基本上，Safari 瀏覽器還不支持Max和Min屬性。 我看不出語法上有任何缺陷。 你使用的是 Safari 1.3+ 版本嗎？ 或低於？ 因為 safari 1.3+ 支持maxlength屬性。

Answer 4

可以限制使用 onKeyDown 長度

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

快樂編碼:)

Answer 5

我使用了與@Jules 答案非常相似的東西，除了他不允許使用 shift+home 之類的鍵。 由於我們正在驗證數字，我只是在 keyup 函數中使用了 isNaN。

$("#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" />

Answer 6

這是一個更簡單的解決方案。 對我來說它有效

<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 塊將阻止“.”（點），因此無法輸入浮點數。 我們將輸入類型保持為數字，因此它只會作為輸入數字。 如果值長度為 3，則返回 false，因此輸入長度也受到限制。

Answer 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, '');
  });
}

Answer 8

您不能使用輸入類型 =“數字”的 maxlength 和 minlength 函數

相反，可以使用正則表達式來解決這個問題
(?=.*[0-9]) - 必須只包含數字

{10,10} - 最小長度和最大長度必須為 10。您可以更改這些值

<input type="number" pattern="(?=.*[0-9]).{10,10}" />

采用

pattern="(?=.*[0-9]).{10,10}"