无法阻止 Android Chrome 上的键盘输入

Question

所以我想在用户超过 contentEditable p 标签中的字符限制时阻止键盘输入：

<p autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" placeholder="Enter text..." class="entry__text"></p>


$('.entry__text').on('keydown', function(e) {
    if (e.target.innerHTML.length > 10) {
        e.preventDefault();
        // return false;
    }
    console.log(e.target.innerHTML);
});

要么 e.preventDefault() 要么返回 false；不起作用。满足条件，但键仍会写入 p 标签。除了移动 Android 上的最新 Chrome 之外，它确实适用于其他所有设备。

我在稍旧的版本（Chrome 40.0.2357.93，然后是 51.xx）上进行了测试，但它确实阻止了输入。

有什么建议吗？

Answer 1

对您的代码进行以下更改。我已将 maxlength 属性添加到您的标签中。

<p autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" placeholder="Enter text..." maxlength="10" class="entry__text"></p>

在下面添加 JavaScript 代码：

$(document).ready(function() {

  var limitNum = 10;
  $("p[contenteditable='true'][maxlength]").on('keydown paste', function (event) {
     var cntMaxLength = parseInt($(this).attr('maxlength'));

     if ($(this).text().length === cntMaxLength && event.keyCode != 8) {
         event.preventDefault();
     }
  });
});

供您参考，请查看this JSFiddle。