TA貢獻1828條經驗 獲得超3個贊
//獲取選擇域位置，如果未選擇便是光標位置
function getSelection(el) {
return (
('selectionStart' in el && function () {
var l = el.selectionEnd - el.selectionStart;
return {
start: el.selectionStart,
end: el.selectionEnd,
length: l,
text: el.value.substr(el.selectionStart, l)
};
}) ||
(document.selection && function () {
el.focus();
var r = document.selection.createRange();
if (r === null) {
return {
start: 0,
end: el.value.length,
length: 0
}
}
var re = el.createTextRange();
var rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return {
start: rc.text.length,
end: rc.text.length + r.text.length,
length: r.text.length,
text: r.text
};
}) ||
function () {
return null;
}
)();
}
//替換選擇
function replaceSelection(el) {
var text = arguments[0] || '';
return (
/* mozilla / dom 3.0 */ ('selectionStart' in el && function () {
el.value = el.value.substr(0, el.selectionStart) + text + el.value.substr(el.selectionEnd, el.value.length);
return this;
}) ||
/* exploder */ (document.selection && function () {
el.focus();
document.selection.createRange().text = text;
return this;
}) ||
/* browser not supported */function () {
el.value += text;
return jQuery(el);
}
)();
}
TA貢獻1906條經驗 獲得超10個贊
可以考慮使用 Range，但是由于存在兼容性問題，也比較麻煩。
新浪的做法挺簡單的。
用 css 控制，做一個和 textarea 一樣樣式的 div，放在一個不可見的地方。綁定事件保證 div 里面的內容和 textarea 一致。
如果輸入的是 @ 或者其他需要關注的字符，就在 div 里面的 @ 外層用 包裹一下 <span>@</span>。
這個時候，我們就可以用傳統的方法獲取 @ 相對 div 左上角的 xy 座標了。根據 xy 座標，就能確定彈出層相對 textarea 的位置了。
TA貢獻1836條經驗 獲得超5個贊
以下是在Vue中的例子實現
// main.js中
import { position, offset } from 'caret-pos';
Vue.prototype.$positon = position
Vue.prototype.$offset = offset
// edior.vue 的 methods 中，然后在 mounted 鉤子中掛一下這個方法
bindKeys() {
let textarea = document.querySelector('.textarea')
textarea.addEventListener('keyup', (e) => {
console.log('____________', this.$offset(textarea))
})
},
舉報