Facing unexpected behavior in javascript while checking string length

Question

Ok, let me tell you my current scenario, I have a textbox in my page which accepts user input and if the input's length is greater than 5 characters then it will show a button.

Let me show you the code,

<telerik:RadTextBox runat="server" ToolTip="Enter your mobile number" CssClass="form-control" placeholder="mobile"
                                    ID="txtmobile" Width="70%">
                                    <ClientEvents OnKeyPress="openButton" />
                                </telerik:RadTextBox>

and the function,

function openButton(sender, eventArgs) {
                debugger;
                var mobileno = sender.get_value() + eventArgs.get_keyCharacter();
                if (mobileno.length > 5) { // if length of the entered text is logical
                    window.$get('<%= btnChkMobile.ClientID%>').style.display = 'block';

                }
            }

Now, If I debug the problem I am getting expected result i.e button is showing up but If I press "123456" without debugging it does not show the button and after I press "7" i.e "1234567" it showing that button. Why? How to get the expected result?

https://stackoverflow.com/questions/7105997/javascript-change-event-on-input-element-fires-on-only-losing-focus/7106392#7106392 — Nody, Mar 15 '19 at 09:24

score 0 · Answer 1 · answered Mar 15 '19 at 09:29

The OnKeyPress event is sent to an element when the browser registers keyboard input. This is similar to the OnKeyDown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger OnKeyDown events but not OnKeyPress events. Other differences between the two events may arise depending on platform and browser.

The OnKeyUp event is sent to an element when the user releases a key on the keyboard.

To understand difference between these keys read this answer

Replace OnKeyPress with OnKeyUp and your code should work.

<telerik:RadTextBox runat="server" ToolTip="Enter your mobile number" CssClass="form-control" placeholder="mobile" ID="txtmobile" Width="70%">
    <ClientEvents OnKeyUp="openButton" />
</telerik:RadTextBox>

Facing unexpected behavior in javascript while checking string length

1 Answers1