注意我想说的是position而不是index，其实我要做的是这样的效果：

Question

怎样获得一个textarea输入框中光标的位置

让我知道当前光标的位置，我好做autocomplete下拉框的跟随

Answer 1

//获取选择域位置，如果未选择便是光标位置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);    }    )();}

Answer 2

可以考虑使用 Range，但是由于存在兼容性问题，也比较麻烦。新浪的做法挺简单的。用 css 控制，做一个和 textarea 一样样式的 div，放在一个不可见的地方。绑定事件保证 div 里面的内容和 textarea 一致。如果输入的是 @ 或者其他需要关注的字符，就在 div 里面的 @ 外层用&nbsp;包裹一下&nbsp;<span>@</span>。这个时候，我们就可以用传统的方法获取 @ 相对 div 左上角的 xy 座标了。根据 xy 座标，就能确定弹出层相对 textarea 的位置了。

Answer 3

以下是在Vue中的例子实现// main.js中import { position, offset } from 'caret-pos';Vue.prototype.$positon = positionVue.prototype.$offset = offset// edior.vue 的 methods 中，然后在 mounted 钩子中挂一下这个方法bindKeys() {&nbsp; let textarea = document.querySelector('.textarea')&nbsp; textarea.addEventListener('keyup', (e) => {&nbsp; &nbsp; console.log('____________', this.$offset(textarea))&nbsp; })},