注意我想说的是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 里面的 @ 外层用 包裹一下 <span>@</span>。

这个时候，我们就可以用传统的方法获取 @ 相对 div 左上角的 xy 座标了。根据 xy 座标，就能确定弹出层相对 textarea 的位置了。

Answer 3

以下是在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))

  })

},