Databases
StackOverflow2013
Postsdbo
PODifference between onKeyPress and onKeyUp
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODifference between onKeyPress and onKeyUp
    text
    copied!<p>I am trying to figure out what the difference is between onKeyPress and onKeyUp. I know that onKeyPress happens before the action was submitted and onKeyUp happens after. </p> <p>My problem is what happens when the enter button is pressed?</p> <p>If I use onKeyPress my code works fine and the submit button is disabled. If I use onKeyUp it will submit it, but the submit button will still be active for some reason.</p> <p>Here is the code:</p> <pre><code>&lt;script type="text/javascript"&gt; function InformUser() { window.document.getElementById("loadingMessageDIV").style.display = "block"; &lt;%=Page.GetPostBackEventReference(btnSubmit as Control)%&gt; document.getElementById("btnSubmit").disabled = true; } function validateTxt() { var input = document.getElementById("&lt;%=txtUserName.ClientID %&gt;").value; if(input.length &gt; 0) { document.getElementById("btnSubmit").disabled = false; } else { document.getElementById("btnSubmit").disabled = true; } } &lt;/script&gt; </code></pre> <p>Here is the textbox that calls validateTxt()</p> <pre><code>&lt;asp:TextBox ID="txtUserName" runat="server" Font-Size="11pt" onkeyup="validateTxt()"&gt;&lt;/asp:TextBox&gt; </code></pre> <p>Here is the submit button</p> <pre><code>&lt;asp:Button ID="btnSubmit" runat="server" OnClientClick="InformUser();" OnClick="btnSubmit_Click" Text="Login" Font-Bold="True"/&gt; &lt;script type="text/javascript"&gt; document.getElementById("btnSubmit").disabled = true; &lt;/script&gt; </code></pre> <p>So to recap: If I change onkeypress to onkeyup I gain the ability to captures backspaces, but when I press enter the submit button is still active.</p> <p>If I change onkeyup to onkeypress then I gain the ability to press enter and have the submit button be deactivated. Downside is I can't capture backspaces.</p> <p>Thanks!</p> <h2>Solution:</h2> <p>Figured it out thanks to apsillers.</p> <p>I had to use onkeyup with a check agaisnt the enter key</p> <pre><code>function validateTxt(event) { var input = document.getElementById("&lt;%=txtUserName.ClientID %&gt;").value; var key = event.keyCode || event.which; if(input.length &gt; 0 &amp;&amp; key != 13) { document.getElementById("btnSubmit").disabled = false; } else { document.getElementById("btnSubmit").disabled = true; } } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload