記錄一下js游標位置及複製和剪下板

摘要： 前言 關於游標位置，copy與剪下板等，部落格中總結的比較少，翻了一下，很久之前做編輯器的時候，有類似文字javascript獲取iframe中游標所在位置的父節點名稱 ，但是和今天總結的這個還不太一樣。由於專案中用到在input某個游標之後動態插入巨集，用到了游標位置。在這裡記...

前言

關於游標位置，copy與剪下板等，部落格中總結的比較少，翻了一下，很久之前做編輯器的時候，有類似文字javascript獲取iframe中游標所在位置的父節點名稱 ，但是和今天總結的這個還不太一樣。由於專案中用到在input某個游標之後動態插入巨集，用到了游標位置。在這裡記錄一下。

游標位置後插入

其實游標位置後插入，我的做法是很簡單的，就一句話。vue版本如下：

let focusinput = this.inputEl.selectionStart
if (this.nowSelect) {
item.subsText = `${item.subsText.substr(0, focusinput)}${this.nowLabel}${item.subsText.substring(focusinput, item.subsText.length)}`
}

其中this.inputEl就是input元素

item.subsText就是input中文字

this.nowLabel就是要插入的內容

插入就一句話判斷0到selectionStart的位置，然後把文字查到後面就可以了。

封裝方法

網上也有一些封裝的方法，看了一下，大致可以用。如下：

獲取游標位置函式

// 獲取游標位置
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();
 }
}

當然，像我的那種簡單的應用場景，對瀏覽器支援不是很高的情況，一句話就可以了！

複製和剪下板

監聽頁面複製，新增一些版權資訊，程式碼如下：

document.addEventListener('copy', function (event) {
var clipboardData = event.clipboardData || window.clipboardData;
if (!clipboardData) { return; }
var text = window.getSelection().toString();
if (text) {
event.preventDefault();
clipboardData.setData('text/plain', text + '\n\n haorooms部落格版權所有');
}
})

當然，關於複製文字框中的內容，推薦一個外掛：https://clipboardjs.com/#example-target

這個我在專案中有用過。

好，今天就寫到這裡！