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
}
});
});
The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.
preventDefault() method stops the default action of an element from happening. For example: Prevent a submit button from submitting a form. Prevent a link from following the URL.
preventDefault() prevents the default behaviour, it is not related to bubbling or not the events, so you can safely ignore it.
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.
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.");
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With