Prevent the user from writing more than N characters in the text field using Prototype event watchers
I know it is possible to emulate a property maxlength
from input
elements on textarea
with this trick:
<textarea rows="5" cols="30" onkeydown="return checkLength(this)"></textarea>
<script type="text/javascript">
var maxLength = 30;
function checkLength(elem) {
if (elem.value.length == maxLength) {
return false;
}
return true;
}
</script>
By using the return value of checkLenght as the return value for the event onkeydown
, I can effectively prevent the user from writing outside the configured limit, since the event chain will be broken before the typed letter appears.
I tried the same technique as Prototype event watchers, but it didn't work. Here's a simplified version of what I've tried:
<textarea rows="5" cols="30" id="myTextArea"></textarea>
<script type="text/javascript">
var maxLength = 30;
function checkLength() {
if ($('myTextArea').value.length == maxLength)) {
return false;
}
return true;
}
document.observe('dom:loaded',function(){
$('myTextArea').observe('keydown',checkLength);
});
</script>
Apparently this won't work because I cannot break the chain of events by returning false (and Event.stop()
will prevent this event from bubbling up without stopping execution at all).
I tricked this issue by checking the length of the text area in the event onkeyup
and trimming its value if the limit is exceeded; but this is not the same, as the user will see the text appear and disappear.
Is there a way to achieve the same result?
source to share
Consider other answers and comments. Better do a post check and just don't accept the message.
However, the following should work (this is done in FF and IE, in Opera it doesn't. Can't check why)
<textarea rows="5" cols="30" id="myTextArea"></textarea>
<script type="text/javascript">
var maxLength = 30;
Event.observe('myTextArea', 'keydown', function (event) {
if ($('myTextArea').value.length == maxLength) {
Event.stop(event);
return false;
}
});
</script>
source to share
Trim is not a good solution, just try this to see why
Fill in the text box, then go to the middle and enter characters
This does a terrible effect: the characters entered are taken and then it is cut off, so the text ends.
MaxLength = 21
values (with length = 21): "This is what is printed" then enter before "What" this: "Not" you get: "This is not what it is"
The desired effect is that newly entered characters are ignored and the final text is not discarded.
In the example, this is very short ... imagine a multi-layered text area ... the user would keep typing in the middle without seeing the end being discarded.
Try to use the same example for input type = "text" with maxlength, you will see when the limit is reached, new entered characters are ignored no matter where the cursor is in the text, at the beginning, in the middle or at the end.
source to share
The documentation states what Event#stop
stops propagation and also prevents the default action. Doesn't it work?
Also, binding it to keydown / keyup does not prevent them from pasting a lot of text into the text area.
As Joel said in his comment, not allowing users to type is not a good idea. It is much better to put a validation + warning (e.g. in the Stackoverflow comment box).
source to share