javascript获取textarea光标选择位置和内容方法

封面图 • 2025-12-11 • JavaScript

在 JavaScript 中，要获取 `<textarea>` 光标的位置（即光标所在的位置）以及用户选中的内容，可以使用以下方法：

---

### ✅ 一、获取 `textarea` 的光标位置（光标所在的位置）

```javascript
function getCursorPos(textarea) {
    if (textarea.selectionStart !== undefined) {
        return textarea.selectionStart;
    } else if (document.selection && document.selection.createRange) {
        // 兼容旧版 IE
        const range = document.selection.createRange();
        range.moveStart("character", -textarea.value.length);
        return range.text.length;
    }
}
```

---

### ✅ 二、获取用户选中的内容

```javascript
function getSelectedText(textarea) {
    if (textarea.selectionStart !== undefined) {
        return textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
    } else if (document.selection && document.selection.createRange) {
        // 兼容旧版 IE
        const range = document.selection.createRange();
        return range.text;
    }
}
```

---

### ✅ 三、示例：结合使用

```html
<textarea id="myTextarea" rows="4" cols="50">这是一个示例文本。</textarea>
<button onclick="showSelection()">显示选中内容</button>

alert(`光标位置: ${startPos}\n选中内容: ${selectedText}`);
}

---

### ⚠️ 注意事项

- 上述方法适用于现代浏览器（Chrome、Firefox、Edge 等）。
- 如果需要兼容旧版 Internet Explorer（IE 9 及以下），需要额外处理。
- 在 `textarea` 中，光标位置和选中内容是通过 `selectionStart` 和 `selectionEnd` 属性来控制的。

---

如果你需要 **插入文本到光标位置** 或 **替换选中内容**，也可以继续扩展这些方法。需要的话我可以提供相关代码。