.preventDefault() not working in on.('input', function{})

Question

I would like to limit number of chars in my editable div to 10. After user reach the limit I would like to use .preventDefault() method to protect the div from additional chars. Can you help me out, please?

JSFiddle https://jsfiddle.net/7x2dfgx6/1/

HTML

<div class="profileInfo" id="About" style="border:solid;" contenteditable="true">OOOOO</div>

JQuery

    jQuery(document).ready(function($){

    const limit = 10;
    rem = limit - $('#About').text().length;
    $("#counter").append("You have <strong>" + rem + "</strong> chars left.");
    $("#About").on('input', function(event) {
        var char = $('#About').text().length;
        rem = limit - char;
        $("#counter").html("You have <strong>" + rem + "</strong> chars left.");
        if(char>limit)
        {
            event.preventDefault();
            //TODO
        }
    });
});

Answer 1

To answer your main question:
.preventDefault() cancel behavior of the events that are cancelable . input event is not .

To check whether an event is cancelable, try: console.log(event.cancelable); .
For input it will say "false"

---

You may want something like this (untested):

const limit = 10;
var rem = limit - $('#About').text().length;
$("#counter").append("You have <strong>" + rem + "</strong> chars left.");
$("#About").on('input', function(event) {
    var char = $(this).text().length;
    rem = limit - char;
    if(rem <= 0){
        $(this).text($(this).text().slice(0, limit));
    }
    $("#counter").html("You have <strong>" + rem + "</strong> chars left.");
});

---

EDIT

JSFiddle demo
Since it's contentEditable , I had to use an additional code (from this answer) to set a caret at the end of the input.

Answer 2

use keydown instead of input

jQuery(document).ready(function($){

    const limit = 10;
    rem = limit - $('#About').text().length;
    $("#counter").append("You have <strong>" + rem + "</strong> chars left.");
    $("#About").on('keypress', function(event) {
        var char = $('#About').text().length;
        if(char>limit)
        {
            return false;
            //or
            event.preventDefault();
            //TODO
        }
        rem = limit - char;
        $("#counter").html("You have <strong>" + rem + "</strong> chars left.");

    });

});

DEMO

Answer 3

el.addEventListener('input', function(event) {

 if ( this.innerHTML.length >300  && event.keyCode != 8) {

   document.execCommand("undo");  

 }

 });

Answer 4

Here is one way to limit the characters in an input. Works with paste and typing.

/**
 * Limit an inputs number of characters
 * @param {event} e - event of the input the user is typing into
 * @param {number} limit - number of characters to limit to 
 */
function limitInputCharacters(e, limit){
  if(!e){
    return;
  }
  var inputText = e.target.value;
  var charsLeft = limit - inputText.length;
  if (charsLeft >= 0) {
    // do something, or nothing
  } else if (charsLeft < 0) {
    e.target.value = inputText.slice(0, limit)
  }
}

document.addEventListener("DOMContentLoaded", function() {
  const aboutTextArea = document.getElementById('input-about');
  aboutTextArea.addEventListener("input", function(e) {
    limitInputCharacters(e, 300)
  })
})

Answer 5

I tried this solution with JavaScript.

Also below the input is the character counter.

HTML:

<input type="text" class="about">
<span></span>

javascript:

let about = document.querySelector("input")
    let text = document.querySelector("span")
    const limit = 10
   about.addEventListener("keypress" ,function(event) {

    let char = about.value.length;
    if(char>=limit){
        event.preventDefault();
    }
    let rem = limit - char

    text.innerText = ` You have ${rem} chars left.`

})

Answer 6

As Artur said , the input event is not cancelable. It fires after the DOM has already been modified. Instead, you should listen to the beforeinput event:

 jQuery(document).ready(function($){ const limit = 10; rem = limit - $('#About').text().length; $("#counter").append("You have <strong>" + rem + "</strong> chars left."); $("#About").on('beforeinput', function(event) { var char = $('#About').text().length; rem = limit - char; $("#counter").html("You have <strong>" + rem + "</strong> chars left."); if(char>=limit) { event.preventDefault(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="profileInfo" id="About" style="border:solid;" contenteditable="true">OOOOO</div> <div id="counter"></div>

But likely, this code still does not do exactly what you want for at least two reasons:

1. One input event can insert more than one character, for example when you paste text. This makes it possible to exceed the character limit.
2. The implementation prevents not just insertions, but also other kinds of input events, for example deletion, as soon as the character limit has been reached.

Answer 7

Try changing the value of the contenEditable attribute. Also I set the check for the limit to >=

jQuery(document).ready(function($){

    const limit = 10;
    rem = limit - $('#About').text().length;
    $("#counter").append("You have <strong>" + rem + "</strong> chars left.");
    $("#About").on('input', function(event) {
        var char = $('#About').text().length;
        rem = limit - char;
        event.preventDefault();
        if(char>=limit)
        {
            $('#About').attr('contenteditable','False');
            //TODO
        }
        $("#counter").html("You have <strong>" + rem + "</strong> chars left.");
    });

});