I am working on a service which will allow editing of text. To aid the user in the process, I'd like to allow the user to set a text field to overwrite mode, as is possible in Word, etc. How can the behaviour of an HTML text box be changed to overwrite instead of insert text as the user types?

For example, if the textbox had the text:

This is a trst.

The user could click between the r and the t, type a single e and the text would then be

This is a test.

with the cursor between the e and the s. I'm currently using jQuery, so methods using either that or pure javascript would be preferred. I would accept any reasonable solution, however.

I am working on a service which will allow editing of text. To aid the user in the process, I'd like to allow the user to set a text field to overwrite mode, as is possible in Word, etc. How can the behaviour of an HTML text box be changed to overwrite instead of insert text as the user types?

For example, if the textbox had the text:

This is a trst.

The user could click between the r and the t, type a single e and the text would then be

This is a test.

with the cursor between the e and the s. I'm currently using jQuery, so methods using either that or pure javascript would be preferred. I would accept any reasonable solution, however.

• javascript
• jquery
• html

• simple insert key doesnt work ? – vittore Commented May 25, 2012 at 21:29
• @vittore Many puters don't have an insert key and most users don't understand what it does. If you can tell me how to simulate an insert key press on all platforms, that would be a slick solution. – 101100 Commented May 25, 2012 at 21:31
• I don't have time to type this up as I'm headed out the door on vacation, but your best bet is on each key up, take the position of that character, add one to that position numnber (thus getting the next character in the string) and then delete it from the string. Then update the text box with that string value. – Matt Moore Commented May 25, 2012 at 21:50

2 Answers 2

That's a bit of crazy but it seems to work somehow :)

Based on this answer and this answer this piece of code was created.

$("textarea").on("keypress", function(e) {
    var key = String.fromCharCode(e.which || e.charCode || e.keyCode);
    if (/[A-Za-z0-9 ]/.test(key)) {
        var text = this.innerHTML;
        var caret = getCaret(this);
        var output = text.substring(0, caret);
        this.innerHTML = output + key + text.substring(caret + 1);
        setCaretPosition(this, caret + 1);
        return false;
    }
    return true;
});​

DEMO: http://jsfiddle/aHSzC/

It works but now I have no time to fix a small bug I found.

• If you press Backspace it seems to behave like a forward eraser.

Anyway, here is the code that can be improved. Feel free to edit my answer and do whatever you like.

Input elements have an onkeypress attribute. You could make it call a function that gets rid of the character after the cursor. jQuery has a Caret extension that you could use to find out where the caret is.