javascript獲取以及設(shè)置光標(biāo)位置
一. 獲取光標(biāo)位置:
// 獲取光標(biāo)位置
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;
}
二. 設(shè)置光標(biāo)位置:
// 設(shè)置光標(biāo)位置
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;
}
四. 選中特定范圍的文本:
/**
* 選中特定范圍的文本
* 參數(shù):
* textDom [JavaScript DOM String] 當(dāng)前對(duì)象
* startPos [Int] 起始位置
* endPos [Int] 終點(diǎn)位置
*/
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();
}
}
}
五. 在光標(biāo)后插入文本:
/**
* 在光標(biāo)后插入文本
* 參數(shù):
* textDom [JavaScript DOM String] 當(dāng)前對(duì)象
* 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();
}
}
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
Postman自動(dòng)化接口測(cè)試實(shí)戰(zhàn)
有時(shí)我們可能需要在多個(gè)環(huán)境下對(duì)同一個(gè)接口進(jìn)行測(cè)試。比如我們請(qǐng)求的域名,開(kāi)發(fā)、測(cè)試、生產(chǎn)環(huán)境,請(qǐng)求參數(shù)。文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11
解決layui上傳文件提示上傳異常,實(shí)際文件已經(jīng)上傳成功的問(wèn)題
今天小編就為大家分享一篇解決layui上傳文件提示上傳異常,實(shí)際文件已經(jīng)上傳成功的問(wèn)題。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
微信小程序轉(zhuǎn)換uniapp的遷移步驟以及遇到的問(wèn)題總結(jié)
最近公司有個(gè)需求,第一次遇到,把原生的微信小程序代碼轉(zhuǎn)換為uni-app項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于微信小程序轉(zhuǎn)換uniapp的遷移步驟以及遇到問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Three.js+React實(shí)現(xiàn)帶火焰效果的艾爾登法環(huán)
《艾爾登法環(huán)》是最近比較火的一款游戲,觀(guān)察可以發(fā)現(xiàn)它的?Logo?是由幾個(gè)圓弧和線(xiàn)段構(gòu)成。本文使用?React?+?Three.js?技術(shù)棧,實(shí)現(xiàn)具有火焰效果艾爾登法環(huán)?Logo,感興趣的可以了解一下2022-03-03
JavaScript setTimeout與setTimeinterval使用案例詳解
這篇文章主要介紹了JavaScript setTimeout與setTimeinterval使用案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
詳解JavaScript中Promise類(lèi)的使用方法
這篇文章主要為大家詳細(xì)介紹了JavaScript中Promise類(lèi)的使用方法,文中的示例代碼簡(jiǎn)潔易懂,對(duì)我們學(xué)習(xí)JavaScript有一定的幫助,需要的可以參考一下2023-05-05
js 判斷圖片是否加載完以及實(shí)現(xiàn)圖片的預(yù)下載
這篇文章主要介紹了js 判斷圖片是否加載完以及實(shí)現(xiàn)圖片的預(yù)下載,需要的朋友可以參考下2014-08-08
原生js實(shí)現(xiàn)表格循環(huán)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)表格循環(huán)滾動(dòng),每次滾動(dòng)一行停頓,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11

