javascript - onKeyPress 和 onKeyUp 的区别

Question

我想弄清楚 onKeyPress 和 onKeyUp 之间的区别。我知道 onKeyPress 发生在提交操作之前，而 onKeyUp 发生在之后。

我的问题是当按下输入按钮时会发生什么？

如果我使用 onKeyPress，我的代码工作正常并且提交按钮被禁用。如果我使用 onKeyUp 它会提交它，但出于某种原因提交按钮仍将处于事件状态。

代码如下:

<script type="text/javascript">
function InformUser()
{
    window.document.getElementById("loadingMessageDIV").style.display = "block";
   <%=Page.GetPostBackEventReference(btnSubmit as Control)%>
    document.getElementById("btnSubmit").disabled = true;
}

function validateTxt() {
    var input = document.getElementById("<%=txtUserName.ClientID %>").value;
    if(input.length > 0)
    {
        document.getElementById("btnSubmit").disabled = false;
    }
    else
    {
        document.getElementById("btnSubmit").disabled = true;
    }
}

</script>

这里是调用validateTxt()的文本框

<asp:TextBox ID="txtUserName" runat="server" Font-Size="11pt" 
                onkeyup="validateTxt()"></asp:TextBox>

这是提交按钮

<asp:Button ID="btnSubmit" runat="server" OnClientClick="InformUser();" OnClick="btnSubmit_Click"
                            Text="Login" Font-Bold="True"/>
  <script type="text/javascript">
 document.getElementById("btnSubmit").disabled = true;
 </script>

回顾一下:如果我将 onkeypress 更改为 onkeyup，我将获得捕获退格键的能力，但是当我按下回车键时，提交按钮仍然处于事件状态。

如果我将 onkeyup 更改为 onkeypress，那么我就可以按回车键并停用提交按钮。缺点是我无法捕获退格键。

谢谢!

解决方案:

感谢 apsillers 解决了这个问题。

我必须使用 onkeyup 来检查回车键

function validateTxt(event) {
    var input = document.getElementById("<%=txtUserName.ClientID %>").value;
    var key = event.keyCode || event.which;  
    if(input.length > 0 && key != 13)
    {
        document.getElementById("btnSubmit").disabled = false;
    }
    else
    {
        document.getElementById("btnSubmit").disabled = true;
    }
}

Answer 1

有趣的事实:keypress事件不是任何标准的一部分，因此浏览器 vendor 可以自由地使其按照自己喜欢的方式运行。不过，按照惯例，keypress 仅针对具有可打印表示的键触发。如果您想捕获不可打印的按键(箭头键、控制键、退格键等)，您需要 keyup(或 keydown)。

你不能使用 onkeydown 吗？或者使用 onkeyup 并检查 Enter 键 (e.keyCode 13)？

其他说明:

keypress 和 keydown 将在按住某个键时重复触发，而 keyup 仅触发一次。

MDN 有一个方便的综合 KeyboardEvent guide更多信息。