记录一下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光标位置及复制和剪切板》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 微软计划为 Chrome 添加光标浏览模式
- Vim 光标移动之实际行与屏幕行
- elixir – 禁用在Erlang shell中跳转光标
- javascript – 如何在TEXTAREA中设置光标? (通过不使用jQuery)
- 可变剪切分析
- c# – Windows窗体应用中的非抗锯齿手形光标!
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。