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

傻大头
575 阅读3分钟

光标位置后插入

其实光标位置后插入，我的做法是很简单的，就一句话。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博客版权所有');
}
})

本文转自：https://www.haorooms.com/post/js_focus_position_copy


avatar
文章
阅读
粉丝