我来帮你搞定这个需求！要获取textarea里光标或选中文本的行和列，其实不用绕弯子用window.getSelection，直接用textarea原生的selectionStart和selectionEnd属性更靠谱——这些属性是专门为表单输入元素设计的，兼容性好还容易处理。

另外你提到要替换原有的onfocus事件，我们需要绑定几个关键事件来覆盖所有触发场景：

• selectionchange：现代浏览器中，选区或光标变化时自动触发
• mouseup：鼠标选中文本松开后触发
• keyup：通过键盘移动光标或选中文本后触发
• focus：textarea首次获得焦点时触发

以下是完整的可运行实现：

HTML 代码 #

<textarea id="textarea" style="width:100%;height:100px">Hello world.
It's a nice day.
Go outside and get some sun.
This is line 4.</textarea>
<div>
  <span id="cursor-pos">光标位置：行 1，列 1</span>
  <br>
  <span id="selection-range">选中范围：无</span>
</div>

JavaScript 代码 #

const textarea = document.getElementById('textarea');
const cursorPosEl = document.getElementById('cursor-pos');
const selectionRangeEl = document.getElementById('selection-range');

// 绑定所有需要的事件，确保所有场景都能触发更新
textarea.addEventListener('selectionchange', updatePosition);
textarea.addEventListener('mouseup', updatePosition);
textarea.addEventListener('keyup', updatePosition);
textarea.addEventListener('focus', updatePosition);

function updatePosition() {
  const value = textarea.value;
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;

  // 计算起始位置的行和列
  const startLine = getLineNumber(value, start);
  const startCol = getColumnNumber(value, start);

  // 计算结束位置的行和列（如果有选中内容）
  const endLine = getLineNumber(value, end);
  const endCol = getColumnNumber(value, end);

  // 更新页面显示内容
  cursorPosEl.textContent = `光标位置：行 ${startLine}，列 ${startCol}`;
  
  if (start !== end) {
    selectionRangeEl.textContent = `选中范围：行 ${startLine} 列 ${startCol} 到 行 ${endLine} 列 ${endCol}`;
  } else {
    selectionRangeEl.textContent = '选中范围：无';
  }
}

// 辅助函数：计算指定位置所在的行号（从1开始计数）
function getLineNumber(text, position) {
  const beforeText = text.substring(0, position);
  // 统计换行符数量，加1就是当前行号
  return (beforeText.match(/\n/g) || []).length + 1;
}

// 辅助函数：计算指定位置所在的列号（从1开始计数）
function getColumnNumber(text, position) {
  const beforeText = text.substring(0, position);
  // 找到最后一个换行符的位置，当前行的起始索引是这个位置+1
  const lastNewlineIndex = beforeText.lastIndexOf('\n');
  return position - lastNewlineIndex;
}

关键说明： #

1. 原生属性更可靠：selectionStart和selectionEnd直接返回光标/选区的起始、结束字符索引，不用处理复杂的Range对象，简单高效。
2. 行号计算逻辑：统计光标位置之前的所有换行符数量，加1就是当前行号（第一行没有换行符，所以行号从1开始）。
3. 列号计算逻辑：找到光标位置前最后一个换行符的位置，用当前索引减去这个位置，就是当前行的列号（同样从1开始计数）。
4. 全场景事件覆盖：绑定多个事件确保不管是鼠标选中文本、键盘移动光标，还是首次点击textarea，都能实时更新位置信息。

这样实现的代码比你原来的版本更简洁，兼容性更好，完全满足你的需求：选中文本时显示选中范围的行和列，未选中时显示光标所在的行和列。

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