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

栏目: JavaScript · 发布时间: 6年前

内容简介:关于光标位置,copy与剪切板等,博客中总结的比较少,翻了一下,很久之前做编辑器的时候,有类似文字其实光标位置后插入,我的做法是很简单的,就一句话。vue版本如下:其中this.inputEl就是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

这个我在项目中有用过。

好,今天就写到这里!


以上所述就是小编给大家介绍的《记录一下js光标位置及复制和剪切板》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

标签

标签

Gene Smith / 张军、陈军亮 / 机械工业出版社 / 2012-6 / 59.00元

本书对标记系统这一概念的内涵和外延进行了系统化的、深入浅出的阐述。从什么是标记系统、标记系统有什么价值,到标记系统的架构和与其他分类系统的对比,再到标签的呈现方式和标记系统的实现细节,作者都用通俗易懂的语言进行了阐述,并附有详细的示例和具体的案例研究。本书的每一章都涵盖了标记系统的一个方面,主要内容包括:标记系统的模型、价值、架构,标签的分类、可视化、管理方法,最后介绍标记系统设计方法。本书带领读......一起来看看 《标签》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具