记录一下js光标位置及复制和剪切板

光标位置后插入

其实光标位置后插入，我的做法是很简单的，就一句话。vue版本如下：

[AppleScript] 纯文本查看 复制代码

?

1 2 3 4

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的位置，然后把文本查到后面就可以了。

封装方法

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

获取光标位置函数

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

// 获取光标位置 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; }

设置光标位置函数：

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

// 设置光标位置 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();  } }

获取光标选中文字函数：

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

// 获取选中文字 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; }

选中特定范围的文本函数：

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

/** * 选中特定范围的文本 * 参数： *  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();   }  } }

在光标后插入文本函数：

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

/** * 在光标后插入文本 * 参数： *  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();  } }

复制和剪切板

监听页面复制，添加一些版权信息，代码如下：

[AppleScript] 纯文本查看 复制代码

?

1 2 3 4 5 6 7 8

document.addEventListener('copy', function (event) {[/font][/backcolor][/color][/align]    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博客版权所有');     } })