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

黄舟2017-04-10 12:47:43

可以考虑使用 Range，但是由于存在兼容性问题，也比较麻烦。

新浪的做法挺简单的。

用 css 控制，做一个和 textarea 一样样式的 p，放在一个不可见的地方。绑定事件保证 p 里面的内容和 textarea 一致。

如果输入的是 @ 或者其他需要关注的字符，就在 p 里面的 @ 外层用 包裹一下 <span>@</span>。

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

----- update -----

做了一个 demo，大致实现了一下效果。各种 bug 和错误都没处理（比如空格的处理，比如多个 @ 的情况）。输入 @ 的时候，弹出层会跟着。

仅供参考

http://jsfiddle.net/vDQnj/

阿神2017-04-10 12:47:43

如果你只是想获得输入框中光标的 offset 的话, 你可以用从 At.js 剥离出来的 jQuery 插件: Caret.js.

PHP中文网2017-04-10 12:47:43

可以是用AT-JS jquery插件来实现你需要的效果：

下载地址：

http://pan.baidu.com/share/link?shareid=495943&uk=386708086

使用方法：

$("input[name=message]").atWho("@",{
tpl: "<li id='${uid}' data-value='${name}'>${name} <small>${spacenote}</small></li>",
'data':friend_list
});

迷茫2017-04-10 12:47:43

从别处搜索到的东西，希望能对你有帮助。目前也正在使用中~

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

    )();
}

但是如果你想做，你题目描述的东西的话，还是建议用插件。 这里有一个不错的jquery插件： http://ichord.github.io/At.js/