javascript获取以及设置光标位置

最新推荐文章于 2023-11-23 11:29:47 发布

转载最新推荐文章于 2023-11-23 11:29:47 发布 · 579 阅读

博客主要介绍了文本编辑中的相关操作，包括获取光标位置、设置光标位置、获取选中文字、选中特定范围的文本以及在光标后插入文本，这些操作在信息技术的文本编辑场景中较为关键。

AI 时代程序员必备技能

Codex、Claude Code、Cursor、Hermes Agent、OpenClaw等工程化实战专栏，讲透 AI 如何接管脏活累活

一键订阅

一. 获取光标位置：

// 获取光标位置

getCursorPosistion(dom) {

if (!document.selection) {

// 非ie,当选中范围时返回数组

const start = dom.selectionStart;

const end = dom.selectionEnd;

return start === end ? start : [start, end];

} else {

// ie

dom.focus();

var selectRange = document.selection.createRange();

selectRange.moveStart("character", -dom.value.length);

return selectRange.text.length;

}

二. 设置光标位置：

// 设置光标位置

setCursorPosition(dom, pos) {

if (!document.selection) {

// 非ie

dom.setSelectionRange(pos, pos);

dom.focus();

} else {

// ie

var range = dom.createTextRange();

range.moveEnd("character", pos);

range.moveStart("character", pos);

range.select();

}

三. 获取选中文字：

// 获取选中文字

function getSelectText() {

var userSelection, text;

if (window.getSelection) {

// Firefox support

userSelection = window.getSelection();

} else if (document.selection) {

// IE Support

userSelection = document.selection.createRange();

}

if (!(text = userSelection.text)) {

text = userSelection;

}

return text;

}

四. 选中特定范围的文本：

/**

* 选中特定范围的文本

* 参数：

* textDom [JavaScript DOM String] 当前对象

* startPos [Int] 起始位置

* endPos [Int] 终点位置

*/

function setSelectText(textDom, startPos, endPos) {

var startPos = parseInt(startPos),

endPos = parseInt(endPos),

textLength = textDom.value.length;

if(textLength){

if(!startPos){

startPos = 0;

}

if(!endPos){

endPos = textLength;

}

if(startPos > textLength){

startPos = textLength;

}

if(endPos > textLength){

endPos = textLength;

}

if(startPos < 0){

startPos = textLength + startPos;

}

if(endPos < 0){

endPos = textLength + endPos;

}

if(textDom.createTextRange){

// IE Support

var range = textDom.createTextRange();

range.moveStart("character",-textLength);

range.moveEnd("character",-textLength);

range.moveStart("character", startPos);

range.moveEnd("character",endPos);

range.select();

}else{

// Firefox support

textDom.setSelectionRange(startPos, endPos);

textDom.focus();

}

五. 在光标后插入文本：

/**

* 在光标后插入文本

* 参数：

* textDom [JavaScript DOM String] 当前对象

* value [String] 要插入的文本

*/

function insertAfterText(textDom, value) {

var selectRange;

if (document.selection) {

// IE Support

textDom.focus();

selectRange = document.selection.createRange();

selectRange.text = value;

textDom.focus();

}else if (textDom.selectionStart || textDom.selectionStart == '0') {

// Firefox support

var startPos = textDom.selectionStart;

var endPos = textDom.selectionEnd;

var scrollTop = textDom.scrollTop;

textDom.value = textDom.value.substring(0, startPos) + value + textDom.value.substring(endPos, textDom.value.length);

textDom.focus();

textDom.selectionStart = startPos + value.length;

textDom.selectionEnd = startPos + value.length;

textDom.scrollTop = scrollTop;

}

else {

textDom.value += value;

textDom.focus();

}

AI 时代程序员必备技能

Codex、Claude Code、Cursor、Hermes Agent、OpenClaw等工程化实战专栏，讲透 AI 如何接管脏活累活

一键订阅