javascript獲取以及設(shè)置光標(biāo)位置
更新時間:2017年02月16日 10:46:29 作者:子匠_Zijor
本文介紹了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)前對象
* 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)前對象
* 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();
}
}
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
解決layui上傳文件提示上傳異常,實(shí)際文件已經(jīng)上傳成功的問題
今天小編就為大家分享一篇解決layui上傳文件提示上傳異常,實(shí)際文件已經(jīng)上傳成功的問題。具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
微信小程序轉(zhuǎn)換uniapp的遷移步驟以及遇到的問題總結(jié)
最近公司有個需求,第一次遇到,把原生的微信小程序代碼轉(zhuǎn)換為uni-app項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于微信小程序轉(zhuǎn)換uniapp的遷移步驟以及遇到問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Three.js+React實(shí)現(xiàn)帶火焰效果的艾爾登法環(huán)
《艾爾登法環(huán)》是最近比較火的一款游戲,觀察可以發(fā)現(xiàn)它的?Logo?是由幾個圓弧和線段構(gòu)成。本文使用?React?+?Three.js?技術(shù)棧,實(shí)現(xiàn)具有火焰效果艾爾登法環(huán)?Logo,感興趣的可以了解一下2022-03-03
JavaScript setTimeout與setTimeinterval使用案例詳解
這篇文章主要介紹了JavaScript setTimeout與setTimeinterval使用案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
js 判斷圖片是否加載完以及實(shí)現(xiàn)圖片的預(yù)下載
這篇文章主要介紹了js 判斷圖片是否加載完以及實(shí)現(xiàn)圖片的預(yù)下載,需要的朋友可以參考下2014-08-08

