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


    

        在吗
        
    
    //文本输入框
    //发送按钮

        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,在清除一次文本输入框,但是会有一个光标忽然从第二行跳到第一行的动画,不是很完美.想求大神指教一下

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 = ""; }