鼠标双击文本全选
实现效果如图：
双击选中文本
vue项目如何实现：
1.HTML部分
<template>
<div @dblclick="getSelectText"=''>鼠标双击文本全部选择</div>
</template>
2.js部分
methods: {
getSelectText (e) {
if (document.body.createTextRange) {
// IE兼容
var range = document.body.createTextRange();
range.moveToElementText(e.target);
range.select();
} else {
let selection = window.getSelection();
let range = document.createRange();
range.selectNodeContents(e.target);
selection.removeAllRanges();
selection.addRange(range);
}
}
}
input元素获取光标下标
1.HTML部分
<template>
<input @click="getTextIndex'' value=''鼠标双击文本全部选择" />
</template>
2.js部分
methods: {
getTextIndex (e) {
let target = e.target, index;
if (target.selectionStart) {
index = target.selectionStart;
} else {
let range = document.selection.createRange();
index = range.text.length;
}
return index;
}
}
最后总结
根据不同需求，逻辑可以进行相应修改，比如设置光标的位置以及光标位置下插入文本等。
