38

我喜欢输入最多 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"/>

回答：如何防止文本元素中出现字母？

4

8 回答 8

35

我已经通过以下方式完成了它：

<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]*/));
});
于 2012-02-21T06:56:35.093 回答
25

您可以尝试用户 type="text" 和 oninput 如下。这只会让数字。

<input type="text" maxlength="3" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>
于 2016-11-24T16:31:45.430 回答
5

可以限制使用 onKeyDown 长度

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

快乐编码:)

于 2017-12-27T13:17:29.217 回答
4

基本上Safari 浏览器还不支持Max和Min属性。我看不出语法上有任何缺陷。你使用的是 Safari 1.3+ 版本吗？或低于？因为safari 1.3+ 支持maxlength属性。

于 2012-02-21T05:28:18.020 回答
1

我使用了与@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" />
于 2016-03-16T21:29:01.763 回答
1

这是一个更简单的解决方案。对我来说它有效

<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，因此输入长度也受到限制。

于 2017-03-27T11:58:47.527 回答
-1

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, '');
  });
}
于 2017-05-12T02:34:01.210 回答
-2

您不能使用输入类型=“数字”的 maxlength 和 minlength 函数</p>

相反，可以使用正则表达式来解决这个问题
(?=.*[0-9]) - 必须只包含数字

{10,10} - 最小长度和最大长度必须为 10。您可以更改这些值

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

采用

pattern="(?=.*[0-9]).{10,10}"
于 2020-05-06T04:19:47.763 回答