[廾匸]
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

    直接上代码：http://blog.sina.com.cn/s/blog_6befa6b401010jb3.html

    点赞 打赏 评论
  • 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

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

    点赞 打赏 评论

报告相同问题？

提交

相关推荐 更多相似问题