无法阻止 Android Chrome 上的键盘输入 [英] Can't prevent keyboard input on Android Chrome

问题描述

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

so I want to prevent keyboard input when the user goes over a character limit in a contentEditable p tag:

<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 之外，它确实适用于其他所有设备.

Either e.preventDefault() or return false; doesn't work. The condition is met, but keys still get written to the p tag. It does work on everything else except on newest Chrome on mobile Androids.

我在一个稍旧的版本(Chrome 40.0.2357.93 和 51.xx)上进行了测试，它确实阻止了输入.

I tested in on a little bit older version (Chrome 40.0.2357.93 and then 51.xx), and it did prevent input.

有什么建议吗?

推荐答案

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

Make the changes below to your code. I have added the maxlength attribute to your tag.

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

在下面添加 JavaScript 代码:

Add the JavaScript code below:

$(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();
     }
  });
});

为了您的参考，请查看这个 JSFiddle.

For your reference, check this JSFiddle.

这篇关于无法阻止 Android Chrome 上的键盘输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！