js實(shí)現(xiàn)的光標(biāo)位置工具函數(shù)示例
更新時(shí)間：2016年10月03日 10:37:20 作者：kp12345
這篇文章主要介紹了js實(shí)現(xiàn)的光標(biāo)位置工具函數(shù),結(jié)合實(shí)例形式分析了JavaScript操作textarea文本框光標(biāo)位置及文本操作相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)的光標(biāo)位置工具函數(shù)。分享給大家供大家參考，具體如下：
這里介紹的一款textarea中光標(biāo)位置工具函數(shù)的例子。
html代碼：
<p>文本框：</p> <textarea name="" id="textarea" cols="30" rows="10"> sASASADASDasfaDFDsfsDFAfdFADf </textarea> <button type="button" id="setSelectText">選中特定范圍的文本</button> <button type="button" id="insertAfterText">在光標(biāo)后插入文本</button> <br> <hr> <br> <input type="number" name="" id="input"> <button type="button" id="setCurPosBtn">設(shè)置光標(biāo)位置</button> <br> <hr> <br> <p id="selectText">我是一段可以選中的文字，請打開控制臺(tái)查看。我是一段可以選中的文字，請打開控制臺(tái)查看。我是一段可以選中的文字，請打開控制臺(tái)查看。</p>
js代碼：
/**
* 光標(biāo)位置組件
* ## selectRange對象的方法：
* （1）selectRange.of(ele) [創(chuàng)建光標(biāo)位置獲取的新對象]
參數(shù)：
ele {{JavaScript DOM}} 光標(biāo)所在的元素，原生JavaScript DOM
* （2）selectRange.getCurPos() [獲取當(dāng)前坐標(biāo)位置]
* （3）selectRange.setCurPos(pos) [設(shè)置當(dāng)前光標(biāo)位置]
參數(shù)：
pos {{Int}} 當(dāng)前光標(biāo)位置
* （4）selectRange.getSelectText() [獲取選中文字]
* （5）selectRange.setSelectText(startPos, endPos) [選中特定范圍的文本（只限于textarea和input）]
* 參數(shù)：
startPos {{Int}} 起始位置
endPos {{Int}} 終點(diǎn)位置
* （6）selectRange.insertAfterText(value) [在光標(biāo)后插入文本]
* 參數(shù)：
value {{String}} 要插入的文本
*
*
* ## 使用實(shí)例：
* selectRange.of(EleDom).getCurPos(); // 獲取當(dāng)前坐標(biāo)位置
* selectRange.of(EleDom).setCurPos(pos); // 設(shè)置當(dāng)前光標(biāo)位置為pos
* selectRange.of(EleDom).getSelectText(); // 獲取選中文字
* selectRange.of(EleDom).setSelectText(startPos, endPos); // 選中startPos到endPos范圍的文本
* selectRange.of(EleDom).insertAfterText(value); // 在光標(biāo)后插入值為value的文本
*/
var selectRange = function(ele){
this.__element = ele;
};
// 創(chuàng)建光標(biāo)位置獲取的新對象
selectRange.of = function(ele){
if(ele) {
return new selectRange(ele);
} else {
return {};
}
};
selectRange.prototype = {
constructor:selectRange,
// 獲取當(dāng)前坐標(biāo)位置
getCurPos: function() {
var _this = this,
textDom = _this.__element;
// 獲取光標(biāo)位置
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è)置當(dāng)前光標(biāo)位置
* 參數(shù)：
* pos [Int] 當(dāng)前光標(biāo)位置
*/
setCurPos: function(pos) {
var _this = this,
textDom = _this.__element;
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();
}
},
// 獲取選中文字
getSelectText: function() {
var _this = this,
textDom = _this.__element,
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;
},
/**
* 選中特定范圍的文本（只限于textarea和input）
* 參數(shù)：
* startPos [Int] 起始位置
* endPos [Int] 終點(diǎn)位置
*/
setSelectText: function(startPos, endPos) {
var _this = this,
textDom = _this.__element,
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)后插入文本
* 參數(shù)：
* value [String] 要插入的文本
*/
insertAfterText: function(value) {
var _this = this,
textDom = _this.__element,
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();
}
}
};
// ===============================================
// 實(shí)例代碼
var textareaDom = document.querySelector("#textarea"),
setCurPosInput = document.querySelector("#input"),
setCurPosBtn = document.querySelector("#setCurPosBtn"),
selectText = document.querySelector("#selectText"),
setSelectTextBtn = document.querySelector("#setSelectText"),
insertAfterTextBtn = document.querySelector("#insertAfterText");
// 獲取當(dāng)前光標(biāo)位置
textareaDom.addEventListener("keydown", function() {
console.log("getCurPos: " + selectRange.of(textareaDom).getCurPos());
}, false);
// 設(shè)置當(dāng)前光標(biāo)位置
setCurPosBtn.addEventListener("click", function() {
var curPos = parseInt(setCurPosInput.value);
console.log("curPos: " + curPos);
selectRange.of(textareaDom).setCurPos(curPos);
}, false);
// 獲取選中文字
selectText.addEventListener("mouseup", function() {
console.log("selectText: " + selectRange.of(this).getSelectText());
});
// 選中特定范圍的文本
setSelectTextBtn.addEventListener("click", function() {
selectRange.of(textareaDom).setSelectText(0, 21);
}, false);
// 在光標(biāo)后插入文本
insertAfterTextBtn.addEventListener("click", function() {
var insertText = "===hello world, I'm insert content.===";
selectRange.of(textareaDom).insertAfterText(insertText);
}, false);
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JavaScript中的50+個(gè)實(shí)用工具函數(shù)小結(jié)
- JavaScript常用工具函數(shù)匯總（瀏覽器環(huán)境）
- JavaScript常用工具函數(shù)庫匯總
- JavaScript常用工具函數(shù)大全
- JS開發(fā)常用工具函數(shù)(小結(jié))
- JavaScript中cookie工具函數(shù)封裝的示例代碼
- 兩個(gè)比較有用的Javascript工具函數(shù)代碼
- JQuery 操作Javascript對象和數(shù)組的工具函數(shù)小結(jié)
- 56個(gè)實(shí)用的JavaScript 工具函數(shù)助你提升開發(fā)效率
相關(guān)文章
本篇文章主要介紹了詳解Webpack DLL用法以及功能，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要是帶大家一起了解一下所有有關(guān)JavaScript箭頭函數(shù)的信息。文中通過示例講解了如何使用ES6的箭頭語法，以及在代碼中使用箭頭函數(shù)時(shí)需要注意的一些常見錯(cuò)誤，需要的可以參考一下2022-11-11
javascript設(shè)置文本框光標(biāo)的方法實(shí)例小結(jié)
這篇文章主要介紹了javascript設(shè)置文本框光標(biāo)的方法,結(jié)合實(shí)例形式總結(jié)分析了javascript針對文本框光標(biāo)的位置、設(shè)置及文本操作的相關(guān)技巧,需要的朋友可以參考下2016-11-11
JavaScript深入V8引擎以及編寫優(yōu)化代碼的5個(gè)技巧
這篇文章主要介紹了JavaScript深入V8引擎以及編寫優(yōu)化代碼的5個(gè)技巧,JavaScript引擎是執(zhí)行 JavaScript 代碼的程序或解釋器。JavaScript引擎可以實(shí)現(xiàn)為標(biāo)準(zhǔn)解釋器，或者以某種形式將JavaScript編譯為字節(jié)碼的即時(shí)編譯器。,需要的朋友可以參考下2019-06-06
微信小程序?qū)崿F(xiàn)實(shí)時(shí)圓形進(jìn)度條的方法示例
這篇文章主要給大家介紹了利用微信小程序?qū)崿F(xiàn)實(shí)時(shí)圓形進(jìn)度條的方法，文中給出了詳細(xì)的示例代碼，相信對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-02-02
js實(shí)現(xiàn)DIV的一些簡單控制...2007-06-06
uniapp實(shí)現(xiàn)地圖點(diǎn)聚合功能的詳細(xì)教程
最近公司項(xiàng)目需求需要對設(shè)備在地圖上面進(jìn)行監(jiān)控,并在當(dāng)設(shè)備一定距離時(shí)進(jìn)行聚合,這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)地圖點(diǎn)聚合功能的相關(guān)資料,需要的朋友可以參考下2022-12-12
淺談JSON.parse()和JSON.stringify()
本文給大家簡單描述了下JSON.parse()和JSON.stringify()的異同點(diǎn)，十分的實(shí)用，有需要的小伙伴可以參考下2015-07-07
JS/jQuery實(shí)現(xiàn)DIV延時(shí)幾秒后消失或顯示的方法
這篇文章主要介紹了JS/jQuery實(shí)現(xiàn)DIV延時(shí)幾秒后消失或顯示的方法,結(jié)合實(shí)例形式分析了javascript使用setTimeout及jQuery使用delay方法實(shí)現(xiàn)延遲顯示功能的相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
使用Plupload實(shí)現(xiàn)直接上傳附件至七牛云存儲(chǔ)
這篇文章主要介紹了使用Plupload實(shí)現(xiàn)直接上傳附件至七牛云存儲(chǔ),需要的朋友可以參考下2014-12-12