鼠標雙擊文本全選
實現(xiàn)效果如圖：
雙擊選中文本
vue項目如何實現(xiàn)：
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;
}
}
最后總結
根據不同需求脂男，邏輯可以進行相應修改征堪，比如設置光標的位置以及光標位置下插入文本等吮便。
