テキスト入力の目に見える位置にキャレットの位置を保持する - firefox misbehaves

Question

私は、メタコンテンツを追加するための "タグ"の選択肢を含むdivをクリックするというテキスト入力ボックスのアイデアを考えています。私のテキスト入力は幅が35ですが、オーバーフローできるようにします。

私は、更新された入力コンテンツの終わりにフォーカスを置いてキャレットを配置する方法を見つけ出しました。クロムとIEは動作し、カーソルは入力ボックスの可視領域にカーソルを表示しますテキスト入力がいっぱいであふれていますFirefox 3.0.7では、正しい位置にあるキャレットが右に表示されません（ただし、キーボードの右矢印を押しても位置を乱すことなく到達できます）。

助けてください。

Answer 1

ありがとう、それは私のjtompsonのために働く。既存のスクリプトと組み合わせて、キャレットをテキスト入力の最後に移動するか、textareaがIE7、FF3、およびchromeをカバーするようです。

function setCaretPosition(elemId, caretPos) { 
     var elem = document.getElementById(elemId); 

    if(elem != null) { 
     if(elem.createTextRange) { 
      var range = elem.createTextRange(); 
      range.move('character', caretPos); 
      range.select(); 
     } 
     else { 
      if(elem.selectionStart) { 
       elem.setSelectionRange(caretPos, caretPos); 
       elem.focus(); 
       // Workaround for FF overflow no scroll problem 
       // Trigger a "space" keypress. 
       var evt = document.createEvent("KeyboardEvent"); 
       evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32); 
       elem.dispatchEvent(evt); 
       // Trigger a "backspace" keypress. 
       evt = document.createEvent("KeyboardEvent"); 
       evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 8, 0); 
       elem.dispatchEvent(evt); 
      } 
      else 
       elem.focus(); 
     } 
    } 
} 
setCaretPosition(document.getElementById("searchinput").id, document.getElementById("searchinput").value.length); 

Answer 2

私の答えはthis questionです。それは比較的クルージングですが、FFでキー入力イベントをトリガーすることができ、入力が最後までスクロールします（キャレットを表示したい場所を表示します）。

Answer 3

FireFoxのテキストエリア内の選択項目にスクロールして同様の問題が発生しました。テキストスペースの選択を上書きするため、「スペース」と「バックスペース」の文字を送信できませんでした。だから私は、選択の直後にキャラクターを事実上再タイピングして、選択を目に見えるようにするより良い方法を見つけました。ここで

はコードです：

function setSelRange(inputEl, selStart, selEnd) { 
    if (inputEl.createTextRange) { 
     var range = inputEl.createTextRange(); 
     range.collapse(true); 
     range.moveEnd('character', selEnd); 
     range.moveStart('character', selStart); 
     range.select(); 
     //range.scrollIntoView(); 
    } else if (inputEl.setSelectionRange) { 
     inputEl.focus(); 
     inputEl.setSelectionRange(selEnd, selEnd + 1); 
     // ---- Firefox Workaround ---- 
     // Send a virtual key, which is the character immediately after the 
     // selected text. It justs rewrites the same character so that no unnecessary changes 
     // are made to the content. 
     // When the selection is at the end of the textarea, an extra space is appended 
     // because the inputEl.value.charCodeAt(selEnd) would otherwise cause an error. 
     var evt = document.createEvent("KeyboardEvent"); 
     if (inputEl.value.length == selEnd) { 
      evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32); 
     } else { 
      evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, inputEl.value.charCodeAt(selEnd)); 
     } 
     inputEl.dispatchEvent(evt); 
     inputEl.setSelectionRange(selStart, selEnd); 

    } 
} 

がこの探している人にお役に立てば幸いです。私はこれを理解しようと多くの時間を無駄にした。