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

Posted

技术标签:

【中文标题】为啥 <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?

【问题讨论】:

你可以使用属性maxmin。见***.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 浏览器还不支持 MaxMin 属性。我看不出语法上有任何缺陷。你使用的是 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 忽略了正则表达式,不知道其他浏览器。

以上是关于为啥 <input type="number" maxlength="3"> 在 Safari 中不起作用?的主要内容,如果未能解决你的问题,请参考以下文章

为啥 <input type="hidden"> 不能接受来自服务器端的布尔值?

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

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

<input type="number"> 在 Firefox 中。为啥 Mozilla 不支持在其浏览器中输入数字?

为啥 `input type="date"` 的行为发生了变化?

在css中,属性选择器前面为啥要加标签,比如 input[type="submit"]