5

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

例如，如果文本框有文本：

This is a trst.

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

This is a test.

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

4

2 回答 2

12

这有点疯狂，但它似乎以某种方式工作:)

基于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;
});​

演示：http: //jsfiddle.net/aHSzC/

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

  • 如果您按下Backspace它，它的行为似乎就像一个向前的橡皮擦。

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

于 2012-05-25T22:14:35.367 回答
0

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

于 2012-05-25T21:57:15.563 回答