无硬换行时，如何判断textarea光标是否在首/末行并触发事件？

这个问题确实有点棘手，因为自动换行不会生成硬换行符，没法直接通过字符串拆分来判断行数。不过我们可以利用浏览器的DOM位置API来精准定位光标所在的可视行，下面是具体的实现方案：

核心思路 #

通过getClientRects()方法获取textarea内每个字符的位置矩形，同一可视行的字符会有相同的top坐标。我们可以通过对比光标所在位置的矩形top值，判断它是否属于第一行或最后一行，再结合键盘事件触发类似离开的操作。

完整代码实现 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <style>
    /* 确保textarea样式统一，避免不同浏览器的默认差异影响矩形计算 */
    textarea {
      font-family: Arial, sans-serif;
      font-size: 14px;
      line-height: 1.5;
      padding: 8px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <form action="/action_page.php">
    <textarea rows="2" cols="20" name="usrtxt" wrap="soft">I'am only one line without line breaks. Look at me, I will wrap automatically but no line break characters are added!</textarea>
  </form>

  <script>
    // 判断光标是否在第一行或最后一行的工具函数
    function isCursorInFirstOrLastLine(textarea) {
      const $textarea = $(textarea);
      const el = $textarea[0];
      const selectionStart = el.selectionStart;

      // 光标在文本最开头，直接判定为第一行
      if (selectionStart === 0) return 'first';

      // 获取所有字符的位置矩形
      const rects = el.getClientRects();
      if (rects.length === 0) return null;

      // 定位光标对应的矩形（光标在字符后时取最后一个字符的矩形）
      const targetRect = selectionStart < rects.length 
        ? rects[selectionStart] 
        : rects[rects.length - 1];

      // 提取所有行的top值（去重后得到总行数）
      const lineTops = [...new Set(Array.from(rects).map(r => r.top))];
      const firstLineTop = lineTops[0];
      const lastLineTop = lineTops[lineTops.length - 1];

      // 判断当前行位置
      if (targetRect.top === firstLineTop) {
        return 'first';
      } else if (targetRect.top === lastLineTop) {
        return 'last';
      }
      return null;
    }

    // 监听光标操作相关事件
    $('textarea[name="usrtxt"]').on('keydown click focus', function(e) {
      const linePosition = isCursorInFirstOrLastLine(this);

      // 第一行按上箭头时触发离开事件
      if (linePosition === 'first' && e.key === 'ArrowUp') {
        e.preventDefault(); // 阻止默认的光标移动行为
        $(this).trigger('simulateLeave');
      }

      // 最后一行按下箭头时触发离开事件
      if (linePosition === 'last' && e.key === 'ArrowDown') {
        e.preventDefault();
        $(this).trigger('simulateLeave');
      }
    });

    // 自定义离开事件的处理逻辑
    $('textarea[name="usrtxt"]').on('simulateLeave', function() {
      console.log('触发类似离开textarea的事件！');
      // 这里可以替换成你需要的操作，比如失去焦点、提交表单等
      $(this).blur();
    });
  </script>
</body>
</html>

关键细节说明 #

1. 样式统一：给textarea设置统一的字体、行高和内边距，避免不同浏览器的默认样式差异导致矩形计算不准确。
2. 矩形定位：getClientRects()会返回每个字符的边界矩形，同一可视行的字符top值一致，以此区分不同行。
3. 事件监听：除了键盘事件，还监听了点击和聚焦事件，确保光标位置变化时都能正确判断。
4. 自定义事件：通过simulateLeave自定义事件来封装离开逻辑，方便后续扩展或修改。

内容的提问来源于stack exchange，提问作者Miso