Javascript to make input field in edit mode(insert mode)

Question

How is it possible to make a input field editable in javascript. I mean onFocus putting it in insert mode so that values can be overwritten. Any suggestions ???

Answer 1

This should work in modern browsers (also on mobile):

var input = document.querySelector('input'); // or a textarea
input.addEventListener('keypress', function(){
    var s = this.selectionStart;
    this.value = this.value.substr(0, s) + this.value.substr(s + 1);
    this.selectionEnd = s;
}, false);

jsfiddle

Note: This is a basic form of insert functionality so some default functionality like CTRL+Z may break.

Answer 2

You can try to mimic Insert mode by rewriting the input value on keyup :

var input = $('input'); // your input element

Event.observe(input, 'keydown', function(e) { // event handler
   input._lastvalue = input.value;
});

Event.observe(input, 'keyup', function(e) { // event handler
    if(input.value == input._lastvalue) return;
    if(input.value.length <= input._lastvalue.length) return;
    var caretPos = doGetCaretPosition(input);
    input.value = input.value.slice(0,caretPos) + input.value.slice(caretPos+1);
    doSetCaretPosition(input, caretPos);
});

Here is a demo : http://jsfiddle.net/z6khW/

Answer 3

EDIT: May be totally off-topic, depending on the meaning behind the question.

If you can use jQuery, Jeditable is a nice plugin to do just that.

If you must roll your own code, take a look at how that plugin works and use it as a starting point.

Basically, the steps are:

1. onFocus/onClick - swap your field with an input.
2. When the user is "done" (hit Enter, click a button), push the result back to the server via Ajax.
3. When your request completes, update the interface with the new value, hiding the input.

Answer 4

After doing some googling, this seems to be related. It might be working trying the play with the following code a bit, but it might only work in specific browsers on specific operating systems, but it's worth a shot anyway.

document.execCommand('OverWrite', false, true);
document.execCommand('OverWrite', false, false);

As per your request, I would say the implementation would work something like this:

<input type="text" 
    onFocus="document.execCommand('OverWrite', false, true);"
    onBlur="document.execCommand('OverWrite', false, false);">