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

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 2

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);">

Answer 3

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/