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

How is it possible to make a input field editable in javascript. I mean onFocus put开发者_如何学Goting it in insert mode so that values can be overwritten. Any suggestions ???

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.

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

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.

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/