textarea-caret-position 项目使用教程

2026-01-18 10:20:05作者：裘旻烁

项目介绍

textarea-caret-position 是一个开源 JavaScript 库，用于获取 <textarea> 或 <input type="text"> 元素中光标（caret）的坐标。这个库可以帮助开发者实现更复杂的前端交互功能，例如在光标位置插入内容或高亮显示特定文本。

项目快速启动

安装

首先，通过 npm 安装 textarea-caret-position：

npm install textarea-caret-position

使用示例

以下是一个简单的使用示例，展示如何在文本框中获取光标的坐标：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Caret Position Example</title>
    <script src="node_modules/textarea-caret-position/index.js"></script>
</head>
<body>
    <textarea id="myTextarea" rows="4" cols="50"></textarea>
    <script>
        document.getElementById('myTextarea').addEventListener('input', function() {
            var caret = getCaretCoordinates(this, this.selectionStart);
            console.log('Caret position:', caret);
        });
    </script>
</body>
</html>

应用案例和最佳实践

案例一：在光标位置插入文本

假设你需要在用户输入时，在光标位置插入特定的文本（例如表情符号），可以使用以下代码：

document.getElementById('myTextarea').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        var caret = getCaretCoordinates(this, this.selectionStart);
        var text = this.value;
        var before = text.substring(0, this.selectionStart);
        var after = text.substring(this.selectionStart);
        this.value = before + '😊' + after;
        this.selectionStart = this.selectionEnd = before.length + 1;
    }
});

案例二：高亮显示特定文本

如果你想在文本框中高亮显示特定的关键词，可以使用以下代码：

function highlightText(keyword) {
    var textarea = document.getElementById('myTextarea');
    var text = textarea.value;
    var index = text.indexOf(keyword);
    if (index !== -1) {
        textarea.selectionStart = index;
        textarea.selectionEnd = index + keyword.length;
        textarea.focus();
    }
}

highlightText('example');