在textarea文本编辑场景中，判断光标是否位于首行或末行是常见需求，尤其是当textarea开启自动换行属性后，行数的计算逻辑会和手动换行产生差异，直接用简单的行号判断很容易出现误差。要实现精准判断，需要结合光标位置、文本内容以及换行规则来综合计算。
核心判断思路
textarea的光标位置可以通过selectionStart属性获取，该属性返回光标在文本中的字符偏移量，从0开始计数。判断首行和末行的核心逻辑如下：
- 首行判断：光标前面的字符中不存在换行符，或者光标位置为0，说明光标在首行
- 末行判断：光标后面的字符中不存在换行符，或者光标位置等于文本总长度，说明光标在末行
这里需要注意，自动换行是浏览器的渲染行为，不会在文本中插入实际的换行符，因此自动换行产生的换行不需要额外处理，只需要关注文本中真实的换行符n即可。
基础实现代码
首先实现获取光标前后换行符数量的方法，再通过换行符数量判断行位置：
// 获取textarea元素
const textarea = document.querySelector('textarea');
// 判断光标是否在首行
function isCursorAtFirstLine(textarea) {
// 获取光标位置
const cursorPos = textarea.selectionStart;
// 获取光标前面的文本内容
const textBeforeCursor = textarea.value.substring(0, cursorPos);
// 如果光标前面没有换行符，或者光标在第一个位置，说明在首行
return !textBeforeCursor.includes('n');
}
// 判断光标是否在末行
function isCursorAtLastLine(textarea) {
// 获取光标位置
const cursorPos = textarea.selectionStart;
// 获取光标后面的文本内容
const textAfterCursor = textarea.value.substring(cursorPos);
// 如果光标后面没有换行符，或者光标在最后一个位置，说明在末行
return !textAfterCursor.includes('n');
}
支持自动换行的完整示例
以下是一个完整的示例，包含textarea的自动换行设置，以及实时监听光标位置判断首末行的逻辑：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>textarea光标首末行判断</title>
<style>
.container {
width: 500px;
margin: 20px auto;
}
textarea {
width: 100%;
height: 200px;
/* 开启自动换行，默认就是开启的，这里显式设置 */
white-space: pre-wrap;
word-wrap: break-word;
}
.result {
margin-top: 10px;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<textarea id="myTextarea" placeholder="请输入文本，支持自动换行"></textarea>
<div class="result" id="result"></div>
</div>
<script>
const textarea = document.getElementById('myTextarea');
const resultDiv = document.getElementById('result');
// 判断光标是否在首行
function isCursorAtFirstLine(textarea) {
const cursorPos = textarea.selectionStart;
const textBeforeCursor = textarea.value.substring(0, cursorPos);
return !textBeforeCursor.includes('n');
}
// 判断光标是否在末行
function isCursorAtLastLine(textarea) {
const cursorPos = textarea.selectionStart;
const textAfterCursor = textarea.value.substring(cursorPos);
return !textAfterCursor.includes('n');
}
// 更新判断结果
function updateCursorLineInfo() {
const isFirstLine = isCursorAtFirstLine(textarea);
const isLastLine = isCursorAtLastLine(textarea);
let info = '';
if (isFirstLine) {
info += '光标位于首行';
}
if (isLastLine) {
if (info) {
info += '，且位于末行';
} else {
info += '光标位于末行';
}
}
if (!info) {
info = '光标不在首行也不在末行';
}
resultDiv.textContent = info;
}
// 监听光标移动和输入事件
textarea.addEventListener('click', updateCursorLineInfo);
textarea.addEventListener('keyup', updateCursorLineInfo);
textarea.addEventListener('input', updateCursorLineInfo);
</script>
</body>
</html>
注意事项
在实际使用中需要注意以下几点：
- 自动换行不会改变textarea的
value属性，因此判断时不需要考虑自动换行产生的虚拟换行，只需要处理真实的n换行符即可 - 如果textarea设置了
wrap="off"关闭自动换行，上述判断逻辑同样适用，因为逻辑只和真实换行符相关 - 当用户通过键盘的上下左右键移动光标时，上述监听事件可以正常捕获光标位置变化，保证判断结果实时准确
该判断逻辑兼容主流浏览器，包括Chrome、Firefox、Edge等，可直接用于生产环境的文本编辑相关功能开发。