0

我的实现思路是:
1.用一个数组,储存用户输入框的所有内容(包括表情和输入的文本)
2.监听onchange事件,将每次输入的文本都单独提取出来push到显示数组内
3.表情用两个数组保存,点击表情图标时,获取当前点击的表情将该表情的title和src分别保存在两个数组内,title数组用户输入框显示,src的数组用户发送后显示表情图标
问题描述:
按照输入的顺序(包含文本和表情)显示正确,如果在已经输入的内容中再插入新的内容显示会异常(在已输入的文本中再插入文本目前正常,主要是在已经输入的表情中再插入文本,显示异常)。
例如:输入[微笑]123[微笑],实际是先输入的微笑,然后后两个表情中间插入的123;文字和表情混合输入会显示异常

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        #div_body {
            width: 720px;
            margin: 0 auto;
        }

        #div_1 {
            width: 720px;
            height: 200px;
            background-color: black;
            opacity: 0.7;
            color: white;
            overflow-y: auto;
            overflow-x: hidden;
        }

        #div1 img {
            width: 24px;
            height: 24px;
        }

        #send {
            width: 720px;
            height: 32px;
            background-color: #954b4b;
        }

        #send > button {
            display: inline-block;
            width: 60px;
            height: 32px;
            float: right;
        }

        textarea {
            float: left;
            display: block;
            width: 660px;
            font-family: 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 16px;
            height: 32px;
            max-height: 80px;
            resize: none;
            box-sizing: border-box;
            -webkit-box-flex: 1;
            box-shadow: rgba(0, 0, 0, 0.2) 0 1px 4px inset;
            padding: 5px 10px;
            overflow: hidden;
            outline: none;
        }

        #div_ul > li {
            width: 720px;
            height: 287px;
            background-image: url("004.jpg");
            clear: both;
        }

        #div_ul li i {
            display: block;
            float: left;
            width: 102px;
            height: 93px;
        }

        #div_ul li i:hover {
            border: 1px solid #5f9cc5;
        }
    </style>
</head>
<body>
<script>
    window.onload = function () {
        var div_1 = document.getElementById('div_1');
        var send = document.getElementById('send');
        var div_ul = document.getElementById('div_ul');
        var send_txt = send.firstElementChild;
        var send_button = send.lastElementChild;
        var emj_i = document.getElementsByTagName('i');


        send_button.onclick = function () {
            if (send_txt.value.length !== 0) {//判断是否输入了内容
                var send_list = document.createElement('div');
                var new_p = document.createElement('p');
                div_1.appendChild(send_list);
                send_list.appendChild(new_p);
                /**/
                new_p.innerHTML = send_arry.join('');
                /**/
                send_txt.value = '';//发送完清空输入框内容
                send_arry = [];
                send_emj_flg = 0;
                emj_arry = [];//显示
                send_emj = [];//发送
            } else {
                alert('没输入');
            }
        };


        var send_arry = [];
        send_txt.onchange = function () {
            send_arry.push(this.value.substring(send_emj_flg));
            console.log(send_arry);
            console.log(this.value.length);
        };

        var emj_arry = [];//显示
        var send_emj = [];//发送
        var send_emj_flg = 0;
        for (var i = 0; i < emj_i.length; i++) {
            emj_i[i].index = i;
            emj_i[i].onclick = function () {
                //debugger;
                if (this.title !== 'delKey') {
                    emj_arry.push('[' + this.title + ']');
                    emj_arry.toString();
                    send_emj.push("<img src=\"http://pub.idqqimg.com/lib/qqface/" + this.index + ".gif\">");//用于表情发送后显示图标
                    /**/
                    send_arry.push(send_emj[send_emj.length - 1]);//每次点击的表情都会push到send_arry,所以send_emj只取最后一个即可
                    /**/
                    if (send_txt.value.length > 0) {//起手点击表情没有文字输入
                        send_txt.value = send_txt.value + '[' + this.title + ']';
                    }
                    if (send_txt.value.length === 0) {//文字输入在先然后再点击表情
                        send_txt.value = emj_arry.join('');
                    }
                    /*11.13*/
                    send_emj_flg = send_txt.value.length;
                    /*11.13*/
                }
                else {
                    alert('这是删除');
                }
            }
        }
    };
</script>
<div id="div_body">
    <div id="div_1"></div>
    <div id="send">
        <textarea></textarea>
        <button>发送按钮</button>
    </div>
    <ul id="div_ul">
        <li>
            <i title="微笑"></i>
            <i title="撇嘴"></i>
            <i title="色"></i>
            <i title="发呆"></i>
            <i title="得意"></i>
            <i title="流泪"></i>
            <i title="害羞"></i>
            <i title="闭嘴"></i>
            <i title="睡"></i>
            <i title="大哭"></i>
            <i title="尴尬"></i>
            <i title="发怒"></i>
            <i title="调皮"></i>
            <i title="呲牙"></i>
            <i title="惊讶"></i>
            <i title="难过"></i>
            <i title="酷"></i>
            <i title="冷汗"></i>
            <i title="抓狂"></i>
            <i title="吐"></i>
            <i title="delKey"></i>
        </li>
    </ul>
</div>
</body>
</html>

我是初学者,目前自己在自学前端,求教诸位前辈指点思路,在此感谢!!!

1个回答

0

已采纳

或许你可以调整一下思路:不在用户输入时处理,而是在展示时才处理内容。

你之前的思路: 用户点击表情,又是判断输入框里之前的内容,又是存储表情,等等。

其实这些都不用,我们换成这样的思路:先不管用户如何输入,他怎么输入,输入框就怎样展示,比如他输入两个表情与一个文本,那么输入框的内容是[微笑]123[撇嘴],等到用户点击发送按钮要把内容展示到聊天框里时,再把[微笑]和[撇嘴]转换为表情。

提供一个简单的代码:

// 存储所有表情,方便转换
/*
emj_arry = {
  [冷汗] : {
    text: "冷汗",
    url: "http://pub.idqqimg.com/lib/qqface/17.gif"
  },
  [发呆] : {
    text: "发呆",
    url: "http://pub.idqqimg.com/lib/qqface/3.gif"
  }
}
*/
var emj_arry = {}; //表情列表
var emj_i = document.getElementsByTagName('i');
for(var i=0, len=emj_i.length; i<len; i++){
  var item = emj_i[i];
  // emj_arry.push( '[' + item.title + ']' );
  emj_arry[ '[' + item.title + ']'  ] = {
    text : item.title,
    url : 'http://pub.idqqimg.com/lib/qqface/' + i + '.gif'
  };
}

// 将文字转换为图片
function emoj2img(text){
  return text.replace(/\[(.*?)\]/g, function(word){
    return '<img src="'+emj_arry[word].url+'" alt="'+word+'" />';
  })
}

// 输入表情
document.querySelector('#div_ul').addEventListener('click', function(event){
  if(event.target.tagName=='I' && event.target.title!=='delKey'){
    send_txt.value = send_txt.value + '[' + event.target.title + ']';
  }
});

// 点击按钮发送
document.querySelector('button').addEventListener('click', function(){
  var textarea = document.querySelector('#send textarea'),
      value = textarea.value;
  
  document.querySelector('#div_1').innerHTML += '<p>'+emoj2img(value)+'</p>'; // 把表情转换为图片后输出
  textarea.value = '';
});

撰写答案