Question

我正在开发一项允许编辑文本的服务。为了帮助用户完成此过程，我想允许用户将文本字段设置为覆盖模式，如Word中所示，等等。如何将HTML文本框的行为更改为覆盖而不是插入文本当用户输入？

例如，如果文本框中包含文本：

This is a trst.

用户可以在r和t之间单击，键入一个e，然后文本将

This is a test.

将光标放在e和s之间。我目前正在使用jQuery，因此使用该方法或纯javascript的方法将是首选。不过，我会接受任何合理的解决方案。

Answer 1

这有点疯狂，但它似乎以某种方式起作用：）

基于this answer和this answer创建了这段代码。

$("textarea").on("keypress", function(e) {
    var key = String.fromCharCode(e.which || e.charCode || e.keyCode);
    if (/[A-Za-z0-9 ]/.test(key)) {
        var text = this.innerHTML;
        var caret = getCaret(this);
        var output = text.substring(0, caret);
        this.innerHTML = output + key + text.substring(caret + 1);
        setCaretPosition(this, caret + 1);
        return false;
    }
    return true;
});

DEMO： http://jsfiddle.net/aHSzC/

它有效但现在我没有时间修复我发现的小错误。

如果按 Backspace ，它似乎就像一个前向橡皮擦。

无论如何，这是可以改进的代码。随意编辑我的答案并做任何你喜欢的事。

Answer 2

输入元素具有onkeypress属性。你可以让它调用一个函数来消除光标后的字符。 jQuery有一个Caret扩展，你可以用它来找出插入符号的位置。

更改HTML文本框：覆盖而不是作为用户类型插入

2 个答案: