17

大量のテキストを編集するために使用される非常に長いテキストエリアを含むページがあります。通常、入力時にキャレットがテキスト領域の下部に近づくと、ページは自動的にスクロールしてキャレットが常にビューポート内に収まるようにします (Firefox は一度に 1 行ずつスクロールし、Chrome はキャレットをテキスト領域の中央にスクロールします)。ビューポート)。

私の問題は、ユーザーの入力内容に基づいてテキスト領域の内容をプログラムで変更しているという事実から来ています。場合によっては、これには余分なコンテンツの追加が含まれ、キャレットがビューの外に押し出されます。

ユーザーがキーを押すとすぐに、自動スクロールが開始され、キャレットが表示されますが、その前ではないため、ユーザーが入力しているときにキャレットを見失います。ブラウザが自動スクロールするテキストエリアでキーイベントをトリガーするだけでよいと思っていましたが、トリガーされたイベントはユーザーの動作を完全にはエミュレートせず、応答がありません。

私が今見ることができる唯一の解決策は、次の方法でキャレットの XY 座標を取得しようとすることです。

  1. キャレットの文字位置を見つける。
  2. キャレットの位置にマーカーを付けて、テキストエリアのコンテンツを反映する div を作成します。
  3. マーカーの位置を測定します。

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

4

3 に答える 3

1

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

http://codemirror.net/

于 2013-02-19T21:46:22.300 に答える
0

[以前のソリューションは Chrome と互換性がありませんでした (WebKit?)]

IF、BIG if、追加のコンテンツが入力の最後に追加されている場合、以下の演習で解決策が得られる場合があります。

<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-25T06:35:00.600 に答える
0

すでに 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-06T09:25:53.523 に答える