JavaScript Max Length Validation with Overtype/Insert Key

Question

I am trying to edit some existing JavaScript validation code.

Using the onkeydown event, the code checks that the value in a textbox does not go past a maximum length. I cannot use <input maxlength="value" /> as there may be some formatting characters in the string that I can safely exclude from the maximum length.

The code works fine apart from when the user has pressed the insert key to turn overtype on and they have reached the maximum length. When this occurs if they place the cursor before a character and try to overwrite it the validation thinks that this will go over the limit and doesn't realise that a character will actually be replaced.

This answer states that I cannot detect if overtype is on, but doesn't provide any references. So assuming that I cannot detect overtype, is there anyway in the onkeydown event to detect if a character is going to be replaced.

I am happy with an IE only solution.

Update: onblur is not appropriate as this will let them go many characters over the limit before warning them of the maximum length. I would like to prevent them from going over the limit.

Answer 1

Your handler should look at the entire value and check the length. If the length is legal, return. If not, you can update the value with a substring. You may have to use caret position to determine exactly how to manipulate the string which can be tricky as it's slightly different in IE and other browsers.

This is different from what you have now which is probably preventing keypress when max length is reached. Don't prevent keypress, just trim the resulting string.

Answer 2

I don't think your problem is with the onblur validation, but an event you calling on key press by the sounds of it (eg preventing the user to key any more once they reach the limit) or I have misunderstood.

IF your validation is indeed onblur, you shouldn't have to worry about things like insert/overwrite being enabled, you are only interested in what the value of the input element is once the user has completed their input.

IF you are trying to stop the user if they reach this limit as they type, I would write a function to compute the actual length you are testing. For eg,

function validateMyInput() {
    var myInputField = document.getElementById('myInput');
    var removeAllExcludedCharsResult = myInputField.value.replace('&','');//exclude &
    var totalLength = removeAllExcludedCharsResult.length;
    if(totalLength < 500) { //limit of this test is 500
        return true;
    }
    else {
return false;
    }

}

Obviously change this function to what you need and maybe make it more generic by passing in the element of the input, max length and array of excluded chars to make it reusable.

UPDATE

I have tested this problem is Chrome and the insert key seems to be ignored. IE on the other hand does overkey. However, it seems page specific, for eg, if i have enabled insert on Page A, it doesn't seem to affect Page B. I found this page which seems to be able to grab the keycode event even when insert has been pressed. It might be due to the following code?

if(window.event) {
    event = window.event; //where event is the javascript key event.
}

Either way, the link above seems to have accounted for the problem, hopefully it will have the answer if the above is not correct.

Hope I haven't misunderstood what the problem was and this helped.