Change HTML Textbox: Overwrite Instead of Insert as User Types

Question

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.

Answer 1

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.net/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.