按下回车键后清空文本框输入内容

Question

我正在使用JavaScript创建一些聊天应用程序，可以让用户在按下回车键后发送消息。

window.onkeydown=function(event){
    if(event.keyCode==13){
        sendNew();
    }
}

在 sendNew() 函数中；

var msg=document.getElementById('txt').value.toString().trim();
    if(msg!=="") {
    //send message        
    document.getElementById('txt').value = "";
    }

当处于<Strong>onfocus</Strong>状态时，按下回车键会清除文本，但似乎会插入一个换行符，并使光标移到<textarea>的下一行。如何消除这种情况并获得完全空的<textarea>?

- danleyb2

Answer 1

你需要做的是取消在按下回车键时浏览器的默认行为（防止浏览器添加新行）。

解决方案：使用 event.preventDefault()。文档： https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault 尝试这段代码:

window.onkeydown=function(event){
    if(event.keyCode==13){
        sendNew();
        if(event.preventDefault) event.preventDefault(); // This should fix it
        return false; // Just a workaround for old browsers
    }
}

一些开发者会忘记使用 event.preventDefault，而使用 return false。这是一个不好的习惯，我建议你使用新的方法。

- BrainOverflow

---

在Chrome 53中，return false对我并没有起作用，但是event.preventDefault()却可以。 - Nathan Long

Answer 2

这是因为回车键的默认行为是插入一个新行。为了防止这种情况发生，可以从keydown事件处理程序中返回false。

window.onkeydown=function(event){
    if(event.keyCode==13){
        sendNew();
        return false; // prevent default behavior if ENTER key
    }
}

- techfoobar