为啥 <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?
【问题讨论】:
你可以使用属性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+ 支持 maxlength 属性。
【讨论】:
谢谢 :) 我使用的是 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 不支持在其浏览器中输入数字?