为啥 <input type="number" maxlength="3"> 在 Safari 中不起作用？

Posted 2023-02-22

【中文标题】为啥 <input type="number" maxlength="3"> 在 Safari 中不起作用？

【英文标题】：why is <input type="number" maxlength="3"> not working in Safari?为什么 <input type="number" maxlength="3"> 在 Safari 中不起作用？

【发布时间】：2012-03-10 19:08:12

【问题描述】：

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

【问题讨论】：

你可以使用属性max和min。见***.com/questions/8354975/…

这很好奇 max 和 min 也不起作用！？

【参考方案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]*/));
);

【讨论】：

我认为你可以在你的模式中使用[0-9]3 而不是[0-9][0-9][0-9]（我知道它至少在 Chrome 中有效）。

这在 ios 中很好，但在 android 上键盘仍然显示为文本，而不是数字。

@lizlux 添加属性inputmode=numeric

规范是愚蠢的，我们需要从 type="number" 更改为 type="text" 与模式和 javascript 是荒谬的

如果要使用 javascript 代码，请删除模式属性。

【参考方案2】：

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

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

【参考方案3】：

使用onKeyDown可以限制长度

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

快乐编码:)

【参考方案4】：

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

【讨论】：

谢谢 :) 我使用的是 Safari 1.5.2。我意识到它就像下面：

【参考方案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" />

【参考方案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 块将阻止“.”（点），因此无法输入浮点数。我们将输入类型保持为数字，因此它只是数字作为输入。如果 value 长度为 3 则返回 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, '');
  );

【参考方案8】：

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

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

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

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

使用

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

【讨论】：

Chrome 忽略了正则表达式，不知道其他浏览器。