テキストエリアのキャレットを常にビューポート内に保持するにはどうすればよいですか？

大量のテキストを編集するために非常に長いテキストエリアを持つページがあります。通常、入力時に、キャレットがテキストエリアの下部に近づくと、ページが自動的にスクロールして常にビューポート内にキャレットを保持します（Firefoxは一度に1行ずつスクロールします）。Chromeはキャレットをビューポート）。テキストエリアのキャレットを常にビューポート内に保持するにはどうすればよいですか？

私の問題は、私はプログラム的にどのようなユーザー・タイプに基づいてテキストエリアの内容を変更していたという事実から来ています。場合によっては、余分なコンテンツを追加する必要があるため、キャレットを非表示にします。

ユーザーがキーを押すと、自動スクロールが開始され、キャレットはスクロールされて表示されますが、以前は入力されていないので、ユーザーがキャレットを見失ってしまいます。私は、ブラウザが自動スクロールするためのテキストエリアでキーイベントを単にトリガすることができますが、トリガされたイベントはユーザーの動作を完全にエミュレートせず、応答も得られませんでした。キャレットの文字位置を見つける

：私は今、見ることができます

唯一の解決策はでキャレットのXY座標を取得しようとすることです。
キャレット位置にマーカーを付けてテキストエリアの内容を反映するdivを作成します。
マーカーの位置を測定する。

これを行うための簡単な方法はありますか？

出典

2012-10-24 blocks

が関連している可能性があり：http://stackoverflow.com/a/12738472/1615483 –

[前溶液は、（WebKitの？）クロムと互換性がありませんでした]

IF、BIG、余分なコンテンツは、入力の最後に追加された場合、以下運動ソリューションを提供することができる。

<html> 
    <head> 
    <script> 
     function btnGoOnClick(ctrl) 
     { 
     //-- For this POC the text content is reset to 160 lines of dummy text - 
     //---------------------------------------------------------------------- 

     ctrl.value = ""; 

     for (var i = 0; i < 160; ++i) 
     { 
      ctrl.value += "dummy!\n"; 
     } 

     //-- Then the carret is set to the last position ----------------------- 
     //---------------------------------------------------------------------- 

     if (ctrl.createTextRange) 
     { 
      //-- IE specific methods to move the carret to the last position 

      var textRange = ctrl.createTextRange(); 
      textRange.moveStart("character", ctrl.value.length); 
      textRange.moveEnd("character", 0); 
      textRange.select(); 
     } 
     else 
     { 
      //-- Mozilla and WebKit methods to move the carret 

      ctrl.setSelectionRange(ctrl.value.length, ctrl.value.length); 
     } 

     //-- For WebKit, the scroll bar has to be explicitly set --------------- 
     //---------------------------------------------------------------------- 

     ctrl.scrollTop = ctrl.scrollHeight; 

     //-- Almost there: make sure the control has fucos and is into view ---- 
     //---------------------------------------------------------------------- 

     ctrl.focus(); 
     ctrl.scrollIntoView(false); 
     } 
    </script> 
    </head> 
    <body> 
    <form name="form"> 
     <input type="button" name="btnGo" value="Go!" onClick="btnGoOnClick(document.form.text);" /> 
     <div style="height: 1000px"></div> 
     <textarea name="text" rows="80"></textarea> 
    </form> 
    </body> 
</html>

出典

2012-10-25 06:35:00

私は何を見ていることのscrollIntoView（）がテキストエリアの先頭にビューポートをスクロールが、それは」doesnのことですキャレットの位置との相関がありません（私のテキストエリアの高さはビューポートの高さよりも大きいので、キャレットは見えない可能性があります）。 – blocks

申し訳ありませんが、私の悪い！ MozillaとIEに対して、Chrome（WebKit）をスキップしてテストしました。私は広範で、失敗した解決策を考案し、私の投稿を編集しようとしています。あなたのニーズがすでに満たされていても、評価し、正当なものであれば、私の投稿を正当なものとしてマークしてください。私は（その）クレジットが必要です:-) –

すでにjavascriptのパス上にあるとダイナミックテキストエリアの高さは、設計上の問題を提起するだろうとしているので、あなたがコンテンツで、あなたのテキストエリアを自動サイズ変更を試みることができる：

function resizeTextarea(textarea) { 
    var lines = textarea.value.split('\n'); 
    var width = textarea.cols; 
    var height = 1; 
    for (var i = 0; i < lines.length; i++) { 
    var linelength = lines[i].length; 
    if (linelength >= width) { 
     height += Math.ceil(linelength/width); 
    } 
    } 
    height += lines.length; 
    textarea.rows = height; 
}

あなたの投稿に記載されている内容には答えられませんが、あなたの質問のタイトルに合った代替の方法が提供されています。だからそれがあなたには役に立たないとしても、それは他の人たちがこの質問に訪れたときのものかもしれません。

私は個人的には小さすぎるテキスト領域を嫌い、ケースに依存しています。

出典

2013-02-06 09:25:53

考えてくれてありがとう、私はこれが別の問題の解決策だと思います。私のケースでは、私は既にあなたが提供したコードと同じことを信じるjquery-elasticを使って、テキスト領域のサイズを自動的に拡大しています（デフォルトのサイズはビューポートより大きいです）。 – blocks

1つの問題についてライブラリ全体を追加することをお勧めしませんが、CodeMirrorを検討することをお勧めします。それはあなたのためのすべてのものを処理し、かなり簡単に使用することです。

http://codemirror.net/

出典

2013-02-19 21:46:22 SpeedySan

テキストエリアのキャレットを常にビューポート内に保持するにはどうすればよいですか？

答えて

関連する問題