js --- 获取|设置光标位置
作者:程序员11 时间:2022-11-26 人气:498 QQ交流群\邮箱:1003265987@qq.com
js --- 获取|设置光标位置
要展示的内容
JS光标
只要是前端开发人员,遇到实现输入框是早晚的事情。而关于光标的处理,又是其重中之重的点。
<textarea v-model="textareaValue" id="textarea" name="content" rows="3" placeholder="请输入内容。。。">
1. 获取光标位置
function getCursorPosition(){ let element = document.getElementById('textarea'); // 获取到指定标签 let startPos = element.selectionStart; // 获取光标开始的位置 let endPos = element.selectionEnd; // 获取光标结束的位置 if (startPos === undefined || endPos === undefined) return; // 如果没有光标位置 不操作 }
2. 光标处添加文本且重新设置光标位置
function insertTxtAndSetcursor(){ let element = document.getElementById('textarea'); // 获取到指定标签 let startPos = element.selectionStart; // 获取光标开始的位置 let endPos = element.selectionEnd; // 获取光标结束的位置 if (startPos === undefined || endPos === undefined) return; // 如果没有光标位置 不操作 let oldTxt = element.value; // 获取输入框的文本内容 let result = oldTxt.substring(0, startPos) + '这里是插入的内容' + oldTxt.substring(endPos); // 将文本插入 element.value = result; // 将拼接好的文本设置为输入框的值 element.focus(); // 重新聚焦输入框 element.selectionStart = startPos + insertTxt.length; // 设置光标开始的位置 element.selectionEnd = startPos + insertTxt.length; // 设置光标结束的位置 }
温馨提示:
欢迎阅读本文章,觉得有用就多来支持一下,没有能帮到您,还有很多文章,希望有一天能帮到您。
- 上一篇:基于vue鼠标双击文本全选及获取光标位置
- 下一篇:获取鼠标选中的文本
HTML5-热门文章
活跃用户












