黑马程序员技术交流社区

标题: 【上海校区】记录一下js光标位置及复制和剪切板 [打印本页]

---

作者: chennaiweng    时间: 2019-5-23 15:58
标题: 【上海校区】记录一下js光标位置及复制和剪切板
光标位置后插入

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

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

 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] 纯文本查看 复制代码

// 获取光标位置

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] 纯文本查看 复制代码

// 设置光标位置

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] 纯文本查看 复制代码

// 获取选中文字

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] 纯文本查看 复制代码

/**

* 选中特定范围的文本

* 参数：

*  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] 纯文本查看 复制代码

/**

* 在光标后插入文本

* 参数：

*  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] 纯文本查看 复制代码

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://www.haorooms.com/post/js_focus_position_copy

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2