Menu
I am counting words in a text field and after a certain amount of words, I use prevent default. In the else, I would like to re-enable the default commands.
Does preventDefault() have an opposite function?
Here is some sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>preventDefault</title>
<style type="text/css"></style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var wordNum = 3;
var input_length;
$("#max").text("max word(s): " + wordNum);
$("#test").keypress(function(event) {
input_length = $.trim($(this).val())
.replace(/\s+/g, " ")
.split(' ').length;
if (input_length > (wordNum - 1)) {
event.preventDefault();
} else {
return true;
}
});
});
</script>
</head>
<body>
<div id="max"></div>
<textarea id="test" cols="20" rows="5"></textarea>
</body>
</html>
It seems to work on IE, but Firefox doesn't like it.
535
There is no opposite method of event. preventDefault() to understand why you first have to look into what event. preventDefault() does when you call it. Underneath the hood, the functionality for preventDefault is essentially calling a return false which halts any further execution.
preventDefault() prevents the default browser behavior for a given element. stopPropagation() stops an event from bubbling or propagating up the DOM tree. Whereas, return false is a combination of both preventDefault() and stopPropagation() .
Use the cancelable property to find out if an event is cancelable. Note: The preventDefault() method does not prevent further propagation of an event through the DOM. Use the stopPropagation() method to handle this.
preventDefault() The preventDefault() method of the Event interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.
I think the problem you are having is that you are not looking for the delete key. Preventdefault does not cancel the event handler all together. But with your code once you hit the maximum length of your field the user will no longer be able delete any characters because the delete keypress is being cancelled.
The reason it works in IE is because IE does not fire the keypress event for delete, end, enter, escape, function keys, home, insert, pageUp/Down and tab. In Safari the keycode for delete is incorrect in the keypress event.
For these reasons I have a twofold suggestion; first, use the keydown event instead so that you get the correct keycodes.
Second, look at the keycode and if it is delete or backspace then don't preventDefault.
if ((event.keyCode != 46 && event.keyCode != 8) || input_length > (wordNum - 1)) {
return false;
} else {
return true;
}
Shouldn't
if maxwords
preventDefault
else
return true
do the trick ?
41
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
