Can't Prevent Keyboard Input On Android Chrome

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

Solution 1:

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

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

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

For your reference, check this JSFiddle.

Share