5

テキストの編集を可能にするサービスに取り組んでいます。ユーザーがプロセスを支援できるように、Wordなどで可能なように、ユーザーがテキストフィールドを上書きモードに設定できるようにしたいと思います。HTMLテキストボックスの動作を、テキストを挿入する代わりに上書きするように変更するにはどうすればよいですか。ユーザーが入力すると？

たとえば、テキストボックスに次のテキストが含まれている場合：

This is a trst.

ユーザーはrとtの間をクリックし、シングルeを入力すると、テキストは次のようになります。

This is a test.

eとの間にカーソルを置きますs。私は現在jQueryを使用しているので、それまたは純粋なjavascriptのいずれかを使用するメソッドが推奨されます。しかし、私は合理的な解決策を受け入れます。

4

2 に答える 2

12

それは少しクレイジーですが、どういうわけかうまくいくようです:)

この回答とこの回答に基づいて、このコードが作成されました。

$("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にはCaret拡張機能があり、これを使用して、caretがどこにあるかを調べることができます。

于 2012-05-25T21:57:15.563 に答える