光标位置插入内容

最新推荐文章于 2024-08-16 11:55:27 发布

转载最新推荐文章于 2024-08-16 11:55:27 发布 · 2k 阅读

文章标签：

#光标 #指定位置

代码分析专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种在HTML的textarea中实现光标位置处插入内容的方法，使用JavaScript来判断光标位置并插入文本，适用于需要在文本编辑器中进行精确插入的应用场景。

在 textarea 文本域光标位置处插入内容

HTML代码：

<form>
    <textarea  name="content" maxlength="6000" size="30"></textarea>
    <textarea  name="content" maxlength="6000" size="30"></textarea>

    <input type="button" onclick="AddContent('光标位置插入内容')" value="插入" />
</form>

JavaScript代码：

//实现在指定位置插入内容
var lastInput = null;
window.onload = function () {
    textares = document.getElementsByTagName("textarea");
    alert(textares);
    for(var i=0 ; i<textares.length ; i++){
        textares[i].onfocus = function () {
            lastInput = this;
        }
    }

}
function AddContent(str) {
    if (lastInput) {
        lastInput.focus();
    }
    if (typeof document.selection != "undefined") {
        document.selection.createRange().text = str;
    }
    else {
        lastInput.value = lastInput.value.substr(0, lastInput.selectionStart) + str + lastInput.value.substring(lastInput.selectionStart, lastInput.value.length);
    }
}