如何在視口中始終保留textarea的插入符號？

Question

我有一個頁面，其中包含很長的文本區域，用於編輯大量文本。 通常，當您鍵入時，當插入符號接近textarea的底部時，頁面將自動滾動以使插入符號始終位於視口內（Firefox將一次滾動一行，Chrome將滾動插入符號的中心視口）。

我的問題來自於我以編程方式根據用戶輸入的內容更改文本區域的內容。 在某些情況下，這涉及添加額外的內容，從而推動插入視圖。

一旦用戶點擊一個鍵，自動滾動就會啟動並且插入符號被滾動到視圖中 - 但不是之前，因此當用戶鍵入時他們看不到插入符號。 我曾希望我可以簡單地觸發textarea上的關鍵事件以使瀏覽器自動滾動，但是觸發的事件並不能完全模擬用戶行為，我也沒有得到響應。

我現在能看到的唯一解決方案是嘗試通過以下方式獲得插入符號的XY坐標：

找到插入符號的字符位置。
構建一個div，它在插入符號位置用標記反映textarea的內容。
測量標記的位置。

有更簡單的方法嗎？

Answer 1

我討厭建議為一個問題添加一個完整的庫，但考慮查看CodeMirror。 它為您處理所有這些東西，並且使用起來相當簡單。

http://codemirror.net/

Answer 2

[之前的解決方案與Chrome（WebKit？）不兼容]

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>

Answer 3

由於您已經在javascript路徑上並且假設動態textarea高度會造成設計問題，您可以嘗試按內容自動調整textarea：

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;
}

我知道這不會回答您帖子中列出的細節，但它提供了一種適合您的問題標題的替代方法。 所以即使它對你沒用，也可能只是對其他人來說這個問題。

我個人討厭太小的文本區域，並依賴於案例，寧願他們自動化。

如何在視口中始終保留textarea的插入符號？

問題描述

3 個解決方案

解決方案1
1 2013-02-19 21:46:22

解決方案2
0 2012-10-25 06:35:00

解決方案3
0 2013-02-06 09:25:53

如何在視口中始終保留textarea的插入符號？

問題描述

3 個解決方案

解決方案1 1 2013-02-19 21:46:22

解決方案2 0 2012-10-25 06:35:00

解決方案3 0 2013-02-06 09:25:53

解決方案1
1 2013-02-19 21:46:22

解決方案2
0 2012-10-25 06:35:00

解決方案3
0 2013-02-06 09:25:53