I'm trying to do some very basic error trapping with javascript. I have a few input fields (textareas, to be exact), and I want to make sure the user doesn't put too much text in there. Rather than using a max length that abrubtly stops accepting input (if you can even use maxlength on textareas), I decided to check the value of the input field with javascript to make sure it wasn't too large.
Basically, each of the text areas on the page has an onChange event that triggers a lil' function I wrote. When the onchange happens, the function is called, passing in the name attribute of the textarea field. If the field.length is greater than the amount I've specified, it will alert the user with a little bit of text.
That works exactly as I expect. I can use one function for all the textareas on the page, and they all validate independantly. Then I decided to take it a step further and return focus to the field in which the user has entered too much text, and this is where the problem occurs.
Lets say the user is entering text into comments1. When they tab or click out of the field, and the onChange is triggered (providing they actually changed something), the alert comes up, but focus is given to the next item (in the case of a 'tab out') or the item the user clicked on (in the case of a 'click out'). I tried onBlur instead of onChange, and that seems to produce the same results.
Here's the code:
function checklen(field) {
eval("var fieldtext = document.survey." + field + ".value"
;
if (fieldtext.length > 5) {
alert("Comment fields are limited to 2500 characters. Please shorten your comments before submitting"
eval("document.survey." + field + ".focus();"
}
}
Funny thing though. If I change that second eval statement to try to give focus to something OTHER than the field the user just clicked or tabbed out of, it works fine. For instance, I can transfer focus from comments1 to comments3, or comments4, or anything other than comments1. I just can't seem to get the focus back to the input field that the user just clicked or tabbed away from.
Any ideas?
Basically, each of the text areas on the page has an onChange event that triggers a lil' function I wrote. When the onchange happens, the function is called, passing in the name attribute of the textarea field. If the field.length is greater than the amount I've specified, it will alert the user with a little bit of text.
That works exactly as I expect. I can use one function for all the textareas on the page, and they all validate independantly. Then I decided to take it a step further and return focus to the field in which the user has entered too much text, and this is where the problem occurs.
Lets say the user is entering text into comments1. When they tab or click out of the field, and the onChange is triggered (providing they actually changed something), the alert comes up, but focus is given to the next item (in the case of a 'tab out') or the item the user clicked on (in the case of a 'click out'). I tried onBlur instead of onChange, and that seems to produce the same results.
Here's the code:
function checklen(field) {
eval("var fieldtext = document.survey." + field + ".value"
;if (fieldtext.length > 5) {
alert("Comment fields are limited to 2500 characters. Please shorten your comments before submitting"
;eval("document.survey." + field + ".focus();"
;}
}
Funny thing though. If I change that second eval statement to try to give focus to something OTHER than the field the user just clicked or tabbed out of, it works fine. For instance, I can transfer focus from comments1 to comments3, or comments4, or anything other than comments1. I just can't seem to get the focus back to the input field that the user just clicked or tabbed away from.
Any ideas?