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