javascript - 如何使用插入符号位置垂直导航文本区域

Question

我正在研究一组 vanilla js 函数，以在单击相应的箭头按钮时导航 html 文本区域。
例如，

var text = document.getElementById('text');
function larr(){
  text.focus();
  var pos = text.selectionStart;
  pos--
  text.setSelectionRange(pos, pos);
}

<textarea id='text'></textarea>
<button onclick="larr()">&larr;</button>

左右功能很简单，但我还想包括向上和向下箭头。由于每个换行符可以有不同数量的字符，我认为这并不像将位置向前或向后设置一个最大行长度那么简单。
我会满足于将您带到下一个或上一个换行符的箭头。我正在考虑在插入符号位置拆分 textarea 值并在该方向上循环字符直到达到\n ，但我无法绕开它。
有没有人有什么建议？谢谢!
* 重要提示 - 这将适用于隐藏 native 键盘的移动设备 ，所以没有来自操作系统的帮助! (除非可能是 jquery trigger() 或 execCommand？)

Answer 1

警告:如果您使用此方法禁用调整文本区域大小的功能，建议您使用。通过这种方式，您可以控制所需的调整器，以考虑不同大小的字符宽度的差异以及使用 textarea 自动换行根据实际宽度选择字符的方式。
注意:没有在移动版上测试这个。
我可以使用我在网上找到的几个函数来实现它:How to get number of rows in textarea using JavaScript? .基本上，海报使用高度、行高、溢出和滚动高度来确定 textarea 的高度，简而言之，获取 textareas 内容中的行数。我包括了海报的原始评论，以帮助您理解逻辑。我调整了他们的第二个函数，将行数除以文本区域内的字符数，这让我们大致了解每行的宽度，虽然不准确! 请参阅警告... 根据每行中的字符(可能会根据 textarea 的宽度而变化)，行中字符的四舍五入量会有所不同。因此，当我们上一条线或下一条线时，它会根据该变化向右或向左跳跃。
我们如何上/下线...

    let style = (window.getComputedStyle) ?
    window.getComputedStyle(text) : text.currentStyle,

    // This will get the line-height if it is set in the css
    textLineHeight = parseInt(style.lineHeight, 10),
    // Get the scroll height of the textarea
    textHeight = calculateContentHeight(text, textLineHeight),
    // calculate the number of lines by dividing
    // the scroll height by the line-height
    numberOfLines = Math.ceil(textHeight / textLineHeight),
    // get the amount of characters in the textarea
    numOfChars = text.value.length,
    // this following number will vary depending on how the width of your 
    // lines character count is calculated and rounded in terms 
    // of what the actual width in character count actually is
    // you will have to adjust this number accordingly
    adjustor = 14,
    // divide the number of characters by the amount of lines
    percentage = numOfChars / numberOfLines + adjustor;

    return percentage;

同样，这在向上和向下时并不精确，但它可以工作，在按下按钮时向上或向下移动光标，它会根据字符的四舍五入数量与该特定行上的数量的数量来轻轻地向左或向右移动。
编辑: 我已将您的运动功能组合成一个运行 的功能。按钮 通过 forEach 上课循环并使用 事件目标 查看编号 每个元素并相应地移动光标。

let text = document.getElementById('text');
text.value = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Scelerisque in dictum non consectetur a erat nam. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. ";
// lets just set a cursor middle of the road for testing...
text.focus();
text.setSelectionRange(181, 181);

let calculateContentHeight = (text, scanAmount) => {
  let origHeight = text.style.height,
    height = text.offsetHeight,
    scrollHeight = text.scrollHeight,
    overflow = text.style.overflow;

  /// only bother if the ta is bigger than content
  if (height >= scrollHeight) {

    /// check that our browser supports changing dimension
    /// calculations mid-way through a function call...
    text.style.height = `${(height + scanAmount)}px`;

    /// because the scrollbar can cause calculation problems
    text.style.overflow = 'hidden';

    /// by checking that scrollHeight has updated
    if (scrollHeight < text.scrollHeight) {

      /// now try and scan the ta's height downwards
      /// until scrollHeight becomes larger than height
      while (text.offsetHeight >= text.scrollHeight) {
        text.style.height = `${(height -= scanAmount)}px`;
      }

      /// be more specific to get the exact height
      while (text.offsetHeight < text.scrollHeight) {
        text.style.height = `${(height++)}px`;
      }

      /// reset the ta back to it's original height
      text.style.height = origHeight;

      /// put the overflow back
      text.style.overflow = overflow;

      return height;
    }
  } else {
    return scrollHeight;
  }
}

let calculateLineWidth = (text) => {
  let style = (window.getComputedStyle) ?
    window.getComputedStyle(text) : text.currentStyle,

    // This will get the line-height only if it is set in the css,
    // otherwise it's "normal"
    textLineHeight = parseInt(style.lineHeight, 10),

    // Get the scroll height of the textarea
    textHeight = calculateContentHeight(text, textLineHeight),

    // calculate the number of lines
    numberOfLines = Math.ceil(textHeight / textLineHeight),

    // get the amount of characters in the textarea
    numOfChars = text.value.length,

    // this number will vary depending on how the width of your 
    // lines character count is calculated and rounded in terms 
    // of what the actual width in character count actually is
    // you will have to adjust this number accordingly
    adjustor = 14,

    // divide the number of characters by the amount of lines
    percentage = numOfChars / numberOfLines + adjustor;

  return percentage;
}

const moveCursor = (text) => {
  const btns = document.querySelectorAll('.btns');
  btns.forEach((btn) => {
    btn.addEventListener('click', (e) => {
      text.focus();
      let pos = text.selectionStart;
      if (e.target.id === 'left') {
        pos--;
        text.setSelectionRange(pos, pos);
      } else if (e.target.id === 'right') {
        pos++;
        text.setSelectionRange(pos, pos);
      } else if (e.target.id === 'up') {
        if (pos - Number(calculateLineWidth(text)) > 0) {
          pos = pos - Number(calculateLineWidth(text));
          text.setSelectionRange(pos, pos);
        } else {
          text.setSelectionRange(0, 0);
        }
      } else {
        pos = pos + Number(calculateLineWidth(text));
        text.setSelectionRange(pos, pos)
      }
    })
  })
}
moveCursor(text);

#text {
  line-height: 1.5;
  text-align: justify;
  resize: none;
}

#btns {
  display: flex;
  align-items: center;
}

#mid {
  display: flex;
  flex-direction: column;
}

.btns {
  height: 20px;
}

<textarea id='text' cols="50" rows="6"></textarea>
<div id="btns">
  <button id="left" class="btns">&larr;</button>
  <div id="mid">
    <button id="up" class="btns">&#129045;</button>
    <button id="down" class="btns">&#129043;</button>
  </div>
  <button id="right" class="btns">&rarr;</button>
</div>