HTML maxlength 属性不适用于 chrome 和 safari？
Posted
技术标签:
【中文标题】HTML maxlength 属性不适用于 chrome 和 safari？【英文标题】：HTML maxlength attribute not working on chrome and safari? 【发布时间】：2012-03-22 05:53:57 【问题描述】：<input type="number" maxlength="5" class="search-form-input" name="techforge_apartmentbundle_searchformtype[radius]" id="techforge_apartmentbundle_searchformtype_radius">
这是我的 html，用 firebug（在 chrome 上）拍摄。
我可以在表单域中写入任意数量的字符 - 在 Chrome 和 Safari 中。
在 Firefox 或 IE10 上，限制没问题。
我在网上没有发现这个问题。
注意：type="number" - 不是文本。
以前有人见过这个问题吗？
【问题讨论】：
***.com/questions/18510845/… 【参考方案1】：最大长度不适用于<input type="number" 我知道的最好方法是使用 oninput 事件来限制最大长度。请看下面的代码。
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>【讨论】：
恕我直言，最好的解决方案 可以只使用 oninput="this.value=this.value.slice(0,this.maxLength)" 来完成。【参考方案2】：对type="number" 的输入使用 max 属性。它将指定您可以插入的最大可能数字
<input type="number" max="999" />
如果同时添加最大值和最小值，则可以指定允许值的范围：
<input type="number" min="1" max="999" />
看到这个example
编辑
如果为了用户体验，您希望用户不能输入超过某个数字，请使用 Javascript/jQuery，如 example 中所示
【讨论】：
这并不强制所有浏览器的最大长度 在 chrome v 74 中这不起作用。浏览器会忽略最大值【参考方案3】：maxlength 属性不适用于 type="number" 的输入
来自关于 type="number" 的 W3 HTML5 规范
以下内容属性不得指定，也不得 适用于元素：accept、alt、checked、dirname、formaction、 formnctype, formmethod, formnovalidate, formtarget, height, maxlength、multiple、pattern、size、src 和 width。
来源：http://dev.w3.org/html5/spec/Overview.html#number-state-type-number （在簿记详情下）
在 FF 和 IE 中，输入回退为文本输入，因此 maxlength 适用于输入。一旦 FF 和 IE 实现了 type="number"，他们也应该以不适用 maxlength 的方式实现它。
【讨论】：
不应该 min="10000000000" max="99999999999" 为 11 个字符工作？它不适用于我的，也不适用于 chrome 或 safari（移动）【参考方案4】：对于那些仍然无法让它工作的人......试试这个来启动更胖的数字键盘：
<input type="number" name="no1" maxlength="1" size="1" max="9" pattern="[0-9]*" />
还有js：
$('input[name="no1"]').keypress(function()
if (this.value.length >= 1)
return false;
);
【讨论】：
keypress 事件在移动 chrome 浏览器上不起作用。或 PWA【参考方案5】：这是一个使用 type="number" 和 maxlength 的示例，适用于 Chrome、IE 等。希望对您有所帮助！
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function test(id, event)
var element = $("#" + id);
var len = element.val().length + 1;
var max = element.attr("maxlength");
var cond = (46 < event.which && event.which < 58) || (46 < event.keyCode && event.keyCode < 58);
if (!(cond && len <= max))
event.preventDefault();
return false;
</script>
</head>
<body>
<input id="test" size="3" type="number" maxlength="3" onkeypress="test(this.id, event)">
</body>
</html>
【讨论】：
即使在 Chrome 和 Safari 中输入类型号，这段代码也能完美运行。谢谢！！这拯救了我的一天！ 这可以防止在表单字段中使用退格，因此键码也应该列入白名单。也许还有“tab”和“enter”。【参考方案6】：说到 HTML 4.01，没有“数字”这样的类型。 说到HTML 5如果http://www.w3schools.com/html5/html5_form_input_types.asp 正确，FF 和 IE 还不知道数字类型。
/edit：所以 FF 和 IE 可能会回退到 text，这就是 maxlength 起作用的原因。
【讨论】：
【参考方案7】：我使用这个jQuery 代码解决了问题：
$('input[type="number"]').on('keypress', function (e)
var maxlength = $(this).prop('maxlength');
if (maxlength !== -1) // Prevent execute statement for non-set maxlength prop inputs
var length = $(this).val().trim().length;
if (length + 1 > maxlength) e.preventDefault();
);
为您想要的每个input[type="number"] 设置maxlength 属性，就像文本输入一样。
【讨论】：
以上是关于HTML maxlength 属性不适用于 chrome 和 safari？的主要内容，如果未能解决你的问题，请参考以下文章
Maxlength 使用 Angular JS 不适用于输入类型文本
Angular 4 表单验证器 - minLength 和 maxLength 不适用于字段类型号