フォーカスを取得するときにテキストボックスビューポートを移動するにはどうすればよいですか？

Question

私は、テキストボックスのサイズよりも大きい文字列を含む可能性のあるテキストボックスを持っています。私が入力しているとき、テキストボックス "ビューポート"は、私が入力した最後の文字を表示するために常に移動します（例えば、SOの質問に非常に大きなタイトルを書くときなど）。 a

問題があるのは、texboxがフォーカスを失った場合、再度フォーカスを合わせたときに常にビューポートがテキストの先頭に設定され、最後に表示することです。

テキストの最後までプログラム的にキャレットを移動しようとしましたが、動作しますが、ビューポートはまだテキストの先頭にあるので、ユーザーはビューポートをテキスト。

例

はこれがフォーカスを失っ前のテキストボックスである：

alt text http://img35.imageshack.us/img35/6697/10437837.jpg

そして、これはフォーカスの後に失われた：ときに私はそれが欲しい

alt text http://img11.imageshack.us/img11/1390/33816597.jpg

txtboxは再びビューポートにフォーカスします第1の画像と同様に設定される。

これは可能ですか？

Answer 1

Sryですが、可能ではないと思います。少なくともクリーンでブラウザに一貫した方法ではありません。

Answer 2

ちょっとした問題は、フォーカスが失われた後にテキストボックスを動的に再読み込みすることです。

文字列を変数に格納してテキストフィールドを削除してから、$ .html（）などの任意のメソッドを使用してテキストフィールドに追加するだけです。

シンプルで、ブラウザ間で機能しますが、少しハックします。

Answer 3

ここをクリックして、ブラウザとイベントの制限に挑戦しています。

人間とのやりとりを模倣するような方法でUIイベントをシミュレートすることはできません（セキュリティ上の問題です）。しかし、いくつかのDOM要素でテキストのコントロールを操作する組み込みの方法がいくつかあります。textarea要素は、そのselectionStart/selectionEnd（ブラウザ固有の実装）変数を使った良い例です。 Firefoxでは、selectionStart/selectionEndを使用すると効果が得られますが、Firefoxの場合にのみ有効です。

このように、ブラウザ間で問題を解決することはできません。テキストスライシングなどで効果をシミュレートする必要があります。ここで

は、私が何を意味するかの迅速擬似コード例です。

element.onblur = function (event) { 
    this.hidden = this.value; 
    if (this.value.length > (this.offsetsetWidth/12)) { 
     this.shown = this.value.slice(this.value.length - (this.offsetWidth/12)); 
     this.value = this.shown; 
    } 
}; 

element.onfocus = function (event) { 
    this.value = this.hidden || this.value; 
}; 

スライスがここにハック（要素の幅に等幅フォントの幅（12ピクセル）の割合をオフに基づいていますそれが何であれ）。したがって、144pxのボックスがあり、モノスペースのフォントを扱っている場合、一度に12文字をボックスに収めることができることがわかります。このようにしてスライスします。

入力の値の長さが24文字の場合、文字列に（24 - （w/12））番目の位置でスライスする簡単な計算を行います。

これはすべてハックです - そして、すべての正直なところ、これに実用的なアプリケーションがありますか？おそらく、テキストの最後の部分の省略記号のようなプレビューを与える入力の下にいくつかのサブテキストを追加する必要があります。

Answer 4

私は、ハックなどについて話している他の答えを読んだ後に質問を誤読しているように感じますが、IE8とFirefox 3.5.2でうまく動作する簡単なサンプルをまとめました。 ID =「テスト」でその入力要素と仮定すると、次の関数呼び出しONFOCUS：Firefoxので

function TestFocus() 
{ 
    var Test = document.getElementById("Test"); 
    if (document.selection) 
    { 
      var SEnd = document.selection.createRange(); 
      SEnd.moveStart("character", Test.value.length); 
      SEnd.select(); 
    } 
    else if (Test.setSelectionRange) 
    { 
     Test.setSelectionRange(Test.value.length, Test.value.length); 

     //- Firefox work around, insert a character then delete it 
     var CEvent = document.createEvent("KeyboardEvent"); 
     if (CEvent.initKeyEvent) 
     { 
      CEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32); 
      Test.dispatchEvent(CEvent); 
      CEvent = document.createEvent("KeyboardEvent"); 
      CEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 8, 0); 
      Test.dispatchEvent(CEvent); 
     } 
    } 
    //- The following line works for Chrome, but I'm not sure how to set the caret position 
    Test.scrollLeft = Test.scrollWidth; 
} 

を、それが直後スペースキーとその後、バックスペースキーを送信するためにinitKeyEventを使用しています。 Chromeでは、最後までキャレットを設定する方法はわかりませんが、入力にscrollLeftを設定するとほとんど動作しますが、少しでも遊んでみることはできますか？ Operaについては、わかりません。私は確かにあなたがあなたの方法であなたを助けることを願っています。

Answer 5

フォーカスを失うと、テキストボックスのtext-align cssプロパティを右揃えに設定します。 MooToolsので

：

$('#yourtextboxid').setStyle('text-align', 'right');