模仿新浪微博“@”好友搜索功能（支持IE和火狐浏览器）-(咋个办呢 zgbn)

最新推荐文章于 2024-08-22 14:32:34 发布

咋个办呢

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量358

点赞数

分类专栏： javascript http 文章标签： javascript html

本文链接：https://blog.csdn.net/ai_zxc/article/details/50670169

版权

javascript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

http

3 篇文章 0 订阅

订阅专栏

模仿新浪微博“@”好友搜索功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
    </head>

    <body>
        <textarea id="textid">
        </textarea>
        <div>索引关键字：<span id='sokey'></span></div>
    </body>
    <script type="text/javascript">
    var util = {

        /**
        * 返回在文本域中光标在文字在中的索引位置
        * function getPosition(obj)
        * @param obj 文本域DOM节点对象，通过document.getElementById()方法得到
        * @param e 内置对象不需要入参
        * @return int 索引位置
        */
        getPosition: function(obj, e) {
            var _event = window.event || e;
            var result = 0;

            if (obj.selectionStart) { //非IE浏览器
                result = obj.selectionStart
            } else {
                //IE
                var rng;
                if (obj.tagName == "TEXTAREA") {
                    //如果是文本域
                    rng = _event.srcElement.createTextRange();
                    rng.moveToPoint(_event.x, _event.y);
                } else { 
                    //输入框
                    rng = document.selection.createRange();
                }
                rng.moveStart("character", -_event.srcElement.value.length);
                result = rng.text.length;
            }
            return result;
        },
        /**
        * 返回在文本域中光标左右两边的字符串。
        * 次方法依赖于 util.getPosition()方法。
        * function getABText(obj)
        * @param obj 文本域DOM节点对象，通过document.getElementById()方法得到
        * @return array 返回数组，0做左边字符串，1为右边字符串
        */
        getABText: function(obj) {
            if (obj.value) {
                var idx = util.getPosition(obj);
                return [obj.value.substr(0, idx), obj.value.substr(idx, obj.value.length)];
            }
            return null;        
        },
        /**
        * 获取文本域中@符号后面的关键字，不能含有空格
        * 次方法依赖于 util.getABText()方法。
        * function getSourchKey(obj)
        * @param obj 文本域DOM节点对象，通过document.getElementById()方法得到
        * @param e 内置对象不需要入参
        * @return string 关键字
        */
        getSourchKey: function(obj, e) {    
            var _event = window.event || e;
            var obj = obj;
            var txs = util.getABText(obj);

            if (!txs) return null;

            var c = _event.keyCode;     
            var _sp = txs[0].lastIndexOf(' ');
            var _ai = txs[0].lastIndexOf('@');

            if (_ai > _sp) {
                var key = txs[0].substr(txs[0].lastIndexOf('@') + 1, txs[0].length - 1);
                return key;
            }

            return null;
        }
    }

    /**测试函数*/
    var txa = document.getElementById('textid');
    txa.onmouseup = txa.onkeyup = function(e) {
        var key = util.getSourchKey(this, e);
        document.getElementById('sokey').innerHTML = key || '';
    }
    </script>

</html>

咋个办呢

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
模仿新浪微博“@”好友搜索功能（支持IE和火狐浏览器）-(咋个办呢 zgbn)

模仿新浪微博“@”好友搜索功能<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <m
复制链接

扫一扫

专栏目录