1NetMedia_Blog

<< HTML高亮关键字的完美解决方案  类别: JS vue中的$on,$emit,v-on 三者关... >>
javascript获取以及设置光标位置
[ 日期: 2019-03-25 3:14:18 PM | 作者: admin | 来源: Original | 人气:206 | 晴天 | 心情: +2 ] 字号: 【
急速栏目链接:
标签:光标及位置  |  
一. 获取光标位置:

// 获取光标位置
function getCursortPosition (textDom) {
var cursorPos = 0;
if (document.selection) {
// IE Support
textDom.focus ();
var selectRange = document.selection.createRange();
selectRange.moveStart ('character', -textDom.value.length);
cursorPos = selectRange.text.length;
}else if (textDom.selectionStart || textDom.selectionStart == '0') {
// Firefox support
cursorPos = textDom.selectionStart;
}
return cursorPos;
}
二. 设置光标位置:

// 设置光标位置
function setCaretPosition(textDom, pos){
if(textDom.setselectionRange) {
// IE Support
textDom.focus();
textDom.setselectionRange(pos, pos);
}else if (textDom.createTextRange) {
// Firefox support
var range = textDom.createTextRange();
range.collapse(true);
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();
}
}

   
Rss Comment  

没有相关评论

发表评论
请先注册,才能发表评论!
- 注册 -