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

Question

<p id="contair">
    <ul>
        <li>在吗</li>
        <p class="clear"></p>
    </ul>
    <textarea></textarea>//文本输入框
    <input type="button" value="发送" name="">//发送按钮
</p>
        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 p2 = document.createElement("p");
            li2.className = "right";
            p2.className = "clear";
            li2.innerHTML = textarea1.value;

            textarea1.value = "";
            ul1.appendChild(li2)
            ul1.appendChild(p2)
        }
        textarea1.onkeypress=function(evt){//按回车也会发送
            var e = evt || event;
            console.log(e.keyCode)
            if(e.keyCode == 65 ){
            var li2 = document.createElement("li");
            var p2 = document.createElement("p");
            li2.className = "right";
            p2.className = "clear";
            li2.innerHTML = textarea1.value;
            ul1.appendChild(li2)
            ul1.appendChild(p2)
            textarea1.value="";
            }
        }

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

Answer 1

回车的keyCode是13吧？你的问题是回车的换行么？
textarea1.onkeypress=function(evt){

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

}

Answer 2

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

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

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

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

but.addEventListener('click', clickHandle);
textarea1.addEventListener('keypress', function(evt) { //按回车也会发送
  var e = evt || event;
  console.log(e.keyCode)
  if (e.keyCode === 13) return clickHandle();
});

function clickHandle() {
  var li2 = document.createElement("li");
  var p2 = document.createElement("p");
  li2.className = "right";
  p2.className = "clear";
  li2.innerHTML = textarea1.value;
  ul1.appendChild(li2)
  ul1.appendChild(p2)
  textarea1.value = "";
}

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

Answer 3

    请输入代码