javascript - 入力の最後にカーソルを移動

Question

これは、入力中に各英語記号を他の記号に置き換える私の小さな jquery プラグインです。入力自体よりも長い長い単語を入力すると、カーソルが入力の外に出て、単語の最後の部分が表示されない場合を除いて、ここではすべて正常に機能します。以下のリンクにアクセスして、何か (スペースなしで) 入力するだけで、私の言いたいことがわかります。

http://jsfiddle.net/beLMf/

これを修正する解決策はありますか？

Answer 1

2 つの問題があります。1 つは、テキストを常に行末に追加することです。つまり、探している文字と一致する場合です。代わりに、キャレット (カーソル) の位置に挿入する必要があります。

jQuery.fn.extend({
insertAtCaret: function(myValue){
  return this.each(function(i) {
    if (document.selection) {
      //For browsers like Internet Explorer
      this.focus();
      sel = document.selection.createRange();
      sel.text = myValue;
      this.focus();
    }
    else if (this.selectionStart || this.selectionStart == '0') {
      //For browsers like Firefox and Webkit based
      var startPos = this.selectionStart;
      var endPos = this.selectionEnd;
      var scrollTop = this.scrollTop;
      this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
      this.focus();
      this.selectionStart = startPos + myValue.length;
      this.selectionEnd = startPos + myValue.length;
      this.scrollTop = scrollTop;
    } else {
      this.value += myValue;
      this.focus();
    }
  })
}
});

次に、行を変更します。

$this.val( $this.val() + String.fromCharCode( i + 4304 ) );

に

$this.insertAtCaret(String.fromCharCode( i + 4304 ));
$("#switcher").focus();
$(this).focus();

これにより、問題が解決され、文字列の任意の部分を編集する問題も解決されます。

update: カーソル位置を更新するには、フォーカスを切り替えてから要素に戻す必要があります

jsFiddleに変更を加えました。問題を解決するために使用することを考えていたカーソル位置をキャプチャする機能もあります。console.log に出力されるだけで、それを削除できます。