onKeyPress 和 onKeyUp 之间的区别

Difference between onKeyPress and onKeyUp

本文关键字:区别 之间 onKeyUp onKeyPress      更新时间:2023-09-26

我试图弄清楚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,那么我就可以按 Enter 并停用提交按钮。 缺点是我无法捕获退格键。

谢谢!

溶液:

多亏了护套,才想通了。

我不得不将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;
    }
}

有趣的事实:keypress事件不是任何标准的一部分,因此浏览器供应商可以自由地让它按照自己喜欢的方式运行。 不过,通常keypress只对具有可打印表示形式的键触发。 如果要捕获不可打印的按键(箭头键、控制键、退格键等(,则需要keyup(或keydown(。

你不能用onkeydown吗? 或者使用onkeyup并检查回车键(e.keyCode 13(?

其他注意事项:

按住密钥时,keypresskeydown将反复触发,而keyup只触发一次。

MDN有一个方便的综合键盘事件指南,包含更多信息。

  • 当按下键盘上的任何键时,onKeyPress被触发
  • onKeyUp 在您松开键盘上的键时触发。如果您按任何键,不要释放它,onKeyPress将被触发,但也不会被触发。

您可能更愿意在表单中提交时执行验证。

keypress仅适用于没有元键的字母、数字和符号
keyup适用于键盘上的所有键

在这个小提琴中使用了jQuery