Javascript 在编辑模式下创建输入字段（插入模式）答案

【问题标题】：Javascript to make input field in edit mode(insert mode)Javascript 在编辑模式下创建输入字段（插入模式）
【发布时间】：2010-04-01 14:31:21
【问题描述】：

如何在 javascript 中使输入字段可编辑。我的意思是 onFocus 将其置于插入模式，以便可以覆盖值。有什么建议吗？？？

【问题讨论】：

输入字段不是已经可以编辑了吗？你说的是对吧？
@mplacona：他的意思是模仿键盘上的插入按钮来覆盖下面的字符。
我将其解读为实现就地编辑，但它也可以解读为将普通的旧输入保存到数据库中。需要进一步澄清。
@ajm：你是对的，它可以读取任何一种方式。

标签： javascript

【解决方案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）可能会中断。

【讨论】：

谢谢，至少对我有用
使用此解决方案，很遗憾您失去了 ctrl-z 功能。
@DiegoPamio 不幸的是。我曾尝试制作自己的 CTRL+Z 实现，但在很多情况下都失败了。
这也有效：this.setSelectionRange(this.selectionStart, this.selectionStart + 1);

【解决方案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);">

【讨论】：

如果这更兼容跨浏览器，我会在这里 +1。碰巧，只有 Internet Explorer 支持它。事实上，似乎只有 IE 支持插入键来覆盖输入。
我尝试使用它但没有成功...你能提供一个简短的例子，如何实现它。我正在使用 onKeypress 事件。谢谢
2020 更新：这适用于 IE，但不适用于 Firefox、Chromium 或 Edge Legacy。插入键在 Chromium 中的 ContentEditable 区域中有效，但在 Firefox 中无效。 webdbg.com/test/edit

【解决方案3】：

编辑：可能完全偏离主题，具体取决于问题背后的含义。

如果您可以使用 jQuery，Jeditable is a nice plugin 可以做到这一点。

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

基本上，步骤是：

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

【讨论】：

+1，我正要建议这个。我更喜欢将此插件称为“Jedi Table”。
哇。从现在开始我要和 Jedi Table 一起去。

【解决方案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/

【讨论】：

感谢您的努力...我尝试了示例，但实际上它会尝试选择剩余的所有字符并删除它们。
哎呀没有在 IE 上测试，只有 FF。