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.

My problem is what happens when the enter button is pressed?

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.

Here is the code:

<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>

Here is the textbox that calls validateTxt()

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

Here is the submit button

<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>

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.

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.

Thanks!

Solution:

Figured it out thanks to apsillers.

I had to use onkeyup with a check agaisnt the enter key

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

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.

My problem is what happens when the enter button is pressed?

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.

Here is the code:

<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>

Here is the textbox that calls validateTxt()

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

Here is the submit button

<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>

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.

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.

Thanks!

Solution:

Figured it out thanks to apsillers.

I had to use onkeyup with a check agaisnt the enter key

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

• javascript
• web

Share Improve this question Follow edited May 22, 2012 at 19:15 user1301708 asked May 22, 2012 at 18:33 user1301708user1301708 19144 silver badges1717 bronze badges 1

• Wouldn't onkeydown capture all of them? – Brendan Delumpa Commented May 22, 2012 at 18:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Fun fact: the keypress event is not part of any standard, so browser vendors are free make it behave however they like. Coventionally, though, keypress only fires for keys that have a printable representation. If you want to capture nonprintable key presses (arrow keys, control keys, backspace, etc.), you want keyup (or keydown).

Couldn't you use onkeydown? Or use onkeyup and check for the Enter key (e.keyCode 13)?

Other notes:

keypress and keydown will fire repeatedly as a key is held down, whereas keyup only fires once.

MDN has a handy prehensive KeyboardEvent guide with more information.

• onKeyPress is fired when any key on your keyboard is pressed
• onKeyUp is fired when you release the key on your keyboard. If you press any key and do not release it, onKeyPress will be fired but nor onKeyUp

Probably you would prefer perform validations onSubmit in your form.

keypress only works for alphabets, numbers and symbols without metakey
keyup works for all keys on keyboard​​​​​

Used jQuery in this fiddle