[廾匸]
2018-02-06 09:43
采纳率: 75%
浏览 2.0k

如何实现textarea中输入@在右下方出现一个div

我想实现一个效果就是在textarea中输入一个@然后在该文字的右下方出现一个div,里面是放一个列表的,跟QQ的输入一样,不管是复制还是直接输入的@都出现这个功能图片说明
大神!大神!快出来~~~~~~~

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

11条回答 默认 最新

  • hfhan_872914334 2018-02-07 03:22
    已采纳
    
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{padding:0;margin:0;}
            .box{position:relatuve;}
            #ipt{
                font-size:16px;
                padding-left:5px;
                height:30px;
                line-height:30px;
            }
            #list{
                position:absolute;
                list-style:none;
                width:150px;
                display:none;
            }
            #list li{height:25px;line-height:25px;}
            #list li:hover{background:#efefef;cursor:pointer;}
        </style>
    </head>
    <body>
        <div class='box'>
            <input type="text" id='ipt'>
            <ul id='list'>
                <li>qq.com</li><li>sina.com</li><li>163.com</li>
            </ul>
        </div>
    
        <script>
            var ipt = document.getElementById('ipt');   
            var list = document.getElementById('list');
    
            ipt.oninput = function(e){
                //console.log(e)
                //获取光标位置
                var position = getPosition(ipt);
                console.log(position,(ipt.value+'').length)
                //如果光标在文本最后面,且最后一个是@
                if((position == (ipt.value+'').length) && /@$/.test(ipt.value)){
                    //把双字节的替换成两个单字节的然后再获得长度 
                    var len = (ipt.value || '').replace(/[^\x00-\xff]/g,"01").length/2;
                    var fz = parseFloat(window.getComputedStyle(ipt).fontSize);
                    var wd = parseFloat(window.getComputedStyle(ipt).width);
                    list.style.left = fz*len>wd?wd:fz*len + "px";
                    list.style.display = "block";
                }else{
                    list.style.display = "none";
                }
            }
            for(var i=0;i<list.children.length;i++){
                list.children[i].onclick = function(e){
                    ipt.value += e.target.innerHTML;
                    list.style.display = "none";
                }
            }
            //输入框获取光标
            function getPosition(element) {
                var cursorPos = 0;
                if (document.selection) {//IE
                    var selectRange = document.selection.createRange();
                    selectRange.moveStart('character', -element.value.length);
                    cursorPos = selectRange.text.length;
                } else if (element.selectionStart || element.selectionStart == '0') {
                    cursorPos = element.selectionStart;
                }
                return cursorPos;
            }
        </script>
    </body>
    </html>
    
    
    点赞 打赏 评论
  • Yeomer 2018-02-06 09:51

    监听输入啊,当输入@这个字符的时候,弹出DIV

    点赞 打赏 评论
  • github_37320188 2018-02-06 10:00

    js获jquery监听textarea输入,获取已输入的内容,当输入内容的最后一个字符为@,
    响应事件(获取当前鼠标输入在浏览器窗口的位置,给这个div设置相应定位,并将预先设置的div显示出来,
    除次之外应该再设置一个透明遮罩层(覆盖整个窗口的遮罩层)在这个div下方),
    当选择@的对象的时候,选择完就关闭div和遮罩层,继续在textarea输入内容
    当没有选择@对象的时候,而是点击了div以外的地方,其实是点击了遮罩层,这时候同样关闭div和遮罩层,可以继续在textarea输入其他内容

    点赞 打赏 评论
  • lyter1214 2018-02-06 10:02

    监听textarea的输入,如果等于“@”就显示那个列表div,div用绝对定位布局

    点赞 打赏 评论
  • blownewbee 2018-02-06 10:08
    点赞 打赏 评论
  • MH1 2018-02-06 13:40

    用个键盘输入的监听器不就行了吗

    点赞 打赏 评论
  • lebron- 2018-02-06 13:51

    change 或 keyup、keydown吧。然后获取内容如果是@就弹出div

    点赞 打赏 评论
  • lebron- 2018-02-06 13:52

    还是一个监听吧,change 或 keyup、keydown, 获取当前内容,如果是@就弹出div

    点赞 打赏 评论
  • leixia96 2018-02-07 01:15

    监听键盘输入事件,获取每次按下的值。当是@的时候就显示div(刚开始div是隐藏的)。

    点赞 打赏 评论
  • 小鬼web 2018-02-07 03:05

    你的需求是不管是复制还是直接输入的@都出现div,所有不能只监听键盘的输入事件,而是应该监听textarea的change事件。

    每当textarea的内容改变的时候,先获取当前textarea的value,然后截取一下最后一个字符判断一下是不是‘@’,
    如果是,那就用js或者jquery控制那个div显示出来。

    点赞 打赏 评论
  • [廾匸] 2018-02-07 06:26

    谢谢各位大神~~~~~~~~~~~~~~~~~~~~~~

    点赞 打赏 评论

相关推荐 更多相似问题