() js中一个模拟的聊天的代码段,用户输入完成后点击回车发送,但是在文本框中会遗留一个回车的问题,要被折磨死了,求完美解决办法?

<div id="contair"> <ul> <li>在吗</li> <div class="clear"></div> </ul> <textarea></textarea>//文本输入框 <input type="button" value="发送" name="">//发送按钮
</div> var but = document.getElementsByTagName"input"[0]; var textarea1 = document.getElementsByTagName"textarea"[0]; var ul1 = document.getElementsByTagName"ul"[0]; but.onclick=function{//点击可以发送 var li2 = document.createElement"li"; var div2 = document.createElement"div"; li2.className = "right"; div2.className = "clear"; li2.innerHTML = textarea1.value; textarea1.value = ""; ul1.appendChildli2 ul1.appendChilddiv2 } textarea1.onkeypress=functionevt{//按回车也会发送 var e = evt || event; console.loge.keyCode ife.keyCode == 65 { var li2 = document.createElement"li"; var div2 = document.createElement"div"; li2.className = "right"; div2.className = "clear"; li2.innerHTML = textarea1.value; ul1.appendChildli2 ul1.appendChilddiv2 textarea1.value=""; } }

做过的尝试中相对好点的有在事件最后追加一个settimeout,在清除一次文本输入框,但是会有一个光标忽然从第二行跳到第一行的动画,不是很完美.想求大神指教一下

回车的keyCode是13吧?你的问题是回车的换行么?
textarea1.onkeypress=functionevt{

.....你的代码
evt.preventDefault;//加这个阻止默认事件

}

大兄弟,enter的keycode是13啊,65是大写字母A

此外,顺带一提,注意html的语意化。

// <input type="button" value="发送" name="">
<button type="button">发送</button>

在js的逻辑中尽量封装函数复用,不要copy代码两遍。以你的代码为例子。

but.addEventListenerclick, clickHandle;
textarea1.addEventListenerkeypress, functionevt { //按回车也会发送 var e = evt || event; console.loge.keyCode if e.keyCode === 13 return clickHandle;
}; function clickHandle { var li2 = document.createElement"li"; var div2 = document.createElement"div"; li2.className = "right"; div2.className = "clear"; li2.innerHTML = textarea1.value; ul1.appendChildli2 ul1.appendChilddiv2 textarea1.value = "";
}

原谅我处女座的病突然犯了,求不打死。

 请输入代码

发表评论

电子邮件地址不会被公开。 必填项已用*标注