极客观点
项目管理
HarmonyOS
我的实现思路是：
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>我是初学者，目前自己在自学前端，求教诸位前辈指点思路，在此感谢！！！
html5
或许你可以调整一下思路：不在用户输入时处理，而是在展示时才处理内容。
你之前的思路： 用户点击表情，又是判断输入框里之前的内容，又是存储表情，等等。
其实这些都不用，我们换成这样的思路：先不管用户如何输入，他怎么输入，输入框就怎样展示，比如他输入两个表情与一个文本，那么输入框的内容是
[微笑]123[撇嘴]，等到用户点击发送按钮要把内容展示到聊天框里时，再把[微笑]和[撇嘴]转换为表情。提供一个简单的代码：