Question

如何在javascript中使输入字段可编辑。我的意思是onFocus将它置于插入模式，以便可以覆盖值。任何建议???

Answer 1

这应该适用于现代浏览器（也适用于移动设备）：

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

注意：这是插入功能的基本形式，因此某些默认功能（如CTRL + Z）可能会中断。

Answer 2

做了一些谷歌搜索后，this seems有关系。它可能正在使用以下代码尝试播放，但它可能只适用于特定操作系统上的特定浏览器，但无论如何它都值得一试。

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

根据您的要求，我会说实施会像以下一样：

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

Answer 3

编辑：根据问题背后的含义，可能完全偏离主题。

如果你可以使用jQuery，Jeditable is a nice plugin就可以了。

如果您必须滚动自己的代码，请查看该插件的工作原理并将其用作起点。

基本上，步骤是：

onFocus / onClick - 使用输入交换您的字段。
当用户“完成”（按Enter键，单击按钮）时，通过Ajax将结果推回服务器。
请求完成后，使用新值更新界面，隐藏输入。

Answer 4

您可以尝试通过在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);
});

以下是演示：http://jsfiddle.net/z6khW/

Answer 5

对于其他浏览器，我有一个比IE更复杂的解决方案（参见接受的答案的评论）：

Overtype mode with jquery

Javascript在编辑模式下输入字段（插入模式）

5 个答案:

jsfiddle