在移动浏览器上强制执行 maxlength 属性答案

【问题标题】：Enforcing the maxlength attribute on mobile browsers在移动浏览器上强制执行 maxlength 属性
【发布时间】：2013-06-30 15:23:12
【问题描述】：

我有一个最大长度的文本输入：

<input type="text" name="name" maxlength="50">

这在我尝试过的所有桌面浏览器上都运行良好，但移动浏览器似乎没有强制执行最大长度。

有没有办法让移动浏览器强制执行maxlength？我愿意在解决方案中使用 JavaScript 和/或 jQuery。

【问题讨论】：

我强烈怀疑还有别的东西在起作用。您是否使用任何库或框架将您的标记转换为不同的移动浏览器，例如 jQuery Mobile？
我会支持@MattBall 所说的话。可能是脚本冲突或抛出错误。有没有看到抛出的 js 错误？
对于不支持 maxLength 属性的浏览器（包括手机），您可以使用 mimo84.github.io/bootstrap-maxlength 看起来像有一个 validate 参数。
我只包含了常规的 jQuery 库。我什至在 w3schools 关于 maxlength 的页面上对其进行了测试。至少在我的手机上不行

标签： javascript jquery html input maxlength

【解决方案1】：

试试这个：

var $input = $('input')
$input.keyup(function(e) {
    var max = 5;
    if ($input.val().length > max) {
        $input.val($input.val().substr(0, max));
    }
});

jsFiddle 在这里：http://jsfiddle.net/fttk2/1/

【讨论】：

按键达到最大5后是否可以禁用？
@DineshKumar 其他响应之一在达到最大值后禁用按键。但是，不建议这样做，因为这样用户将无法按退格键。

【解决方案2】：

var max = 1

input.addEventListener('keyup', function (event) {
    event.target.value = event.target.value.substring(0, max)
})

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性的 cmets 挤满你的代码，这会降低代码和解释的可读性！

【解决方案3】：

此问题是因为您的键盘上启用了预测文本，请禁用它并重试

【讨论】：

当然，但您不能假设每个用户都会禁用此功能。您必须能够考虑所有实例。
@mdurchholz 当然，我只是想让朋友知道为什么会这样，也许会帮助更好的搜索找到最终的答案，我今天也遇到了这个问题，但是我没有找到一个好的回答它

【解决方案4】：

我会建议一些更简单的东西。以上对我不起作用，除非为该字段添加了一个空间来获取它......或者如果我之后点击提交，它仍然通过了信息。

if($(".input") > 20){$(".input") = input.slice(0,20)};

【讨论】：

【解决方案5】：

通用 jQuery 方法来强制执行表单字段的声明 maxlength。（我需要它来实现 sessionStorage、localStorage 和参数覆盖。）针对可读性进行了优化的代码。

$('input').on('change', function () {
  var max = $(this).attr('maxlength'),
      val = $(this).val(),
      trimmed;

  if (max && val) {
    trimmed = val.substr(0, max);
    $(this).val(trimmed);
  }
});

【讨论】：

【解决方案6】：

var maxLength = 10;
var field = $('#myinput');
field.keydown( function(e)
{
    if ( $(this).val().length >= maxLength ) e.preventDefault();
});

【讨论】：

一旦达到最大长度，似乎无法按退格键。