为什么不在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"/>

回答：How can I prevent letters inside a text element?

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

我使用了与@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 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块会阻止“。”（点），所以一个不能进入浮点数。我们将输入类型保持为数字，因此它只是数字作为输入。如果值长度为3，则它将返回false，因此输入长度也受到限制。

Answer 6

使用onKeyDown长度可以被限制

<input type="number" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return 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, '');
  });
}