non-firing onkeyup function

I have some javascript in my ASP.NET HTML who's purpose is to fire a command whenever the Enter key is pressed in a related TextBox.

<asp:TextBox ID="txtFind" Style="z-index: 103; position: absolute; top: 306px; left: 192px; width: 133px;" TabIndex="1" runat="server" ToolTip="Enter the search criteria for the notes you wish to find" CssClass="aNorm" />
<asp:Button ID="cmdFind" Style="z-index: 105; position: absolute; top: 305px; left: 469px" TabIndex="-1" runat="server" Height="18" Width="45px" Font-Names="Verdana" Font-Size="XX-Small" Text="Find" ToolTip="Find notes that match your criteria (entered to the left of this button)" />
<script type="text/javascript">
<!--
    const txtFindElement = document.getElementById('<%= txtFind.ClientID%>');
    if (txtFindElement) {
        txtFindElement.onkeyup = function(e) {
            if (e.key === 'Enter' || e.keyCode === 13) {
                var cmdFindElement = document.getElementById('<%= txtFind.ClientID%>');
                if (cmdFindElement) {
                    cmdFindElement.click();
                }
            }
        };
    }
// --> 
</script>

In the VB.NET code behind,

Private Sub cmdFind_Click(sender As Object, e As EventArgs) Handles cmdFind.Click

    Dim sV As String = txtFind.Text
    Dim sFindWhat$ = Trim(cboFindWhat.SelectedItem.Value)
    Dim attachments As New FTPService

There are no Javascript errors reported by the browser, but the breakpoint in the code-behind is not being caught.

How do I fix this?

Solution

Ok, we are dealing with a number of "quriks" here.

In a asp.net webforms page, if you hit enter in any text box, then the FIRST button in ANY of the markup will run! So, if you have any other buttons on the page, then the first button in markup will trigger as a result of hitting the Enter key.

To make matters even worse, it is the keydown event that triggers this process, not the keyup event (the key up event is too late!).

So, in theory, based on your posted markup, you don't need any special code at all, since hitting Enter key will click + run the button in your markup anyway!

Now, given the above, you really don't need to do anything at all.

However, if there are other buttons on this page, then you can prevent those buttons (any of them) from being triggered by Enter key by adding the following attribute:

        <asp:Button ID="cmdFind" 
            Style="z-index: 105; position: absolute; top: 305px; left: 469px" 
            TabIndex="-1" runat="server" Height="18" Width="45px" 
            Font-Names="Verdana" 
            Font-Size="XX-Small" 
            Text="Find" 
            ToolTip="Find notes that match your criteria (entered to the left of this button)"
            UseSubmitBehavior="false"                
            />

So the UseSubmitBehavior="false" will disable or prevent the Enter key from clicking on that button.

Since we do have a code behind code stub? Then right after the form tag, drag + drop in a ScriptManger. This will then include in your page a JavaScript function called __doPostBack. This function can run, and can accomplish the same effect as clicking on a button.

Or you can simply use the button.click() method in JavaScript

So, in theory, your final code could look like this:

        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

        <asp:TextBox ID="txtFind" 
            Style="z-index: 103; position: absolute; top: 306px; left: 192px; width: 133px;" 
            TabIndex="1" runat="server" 
            ToolTip="Enter the search criteria for the notes you wish to find" 
            CssClass="aNorm"
            onkeydown="myfindkey(this, event)"
            />

        <asp:Button ID="cmdFind" 
            Style="z-index: 105; position: absolute; top: 305px; left: 469px" 
            TabIndex="-1" runat="server" Height="18" Width="45px" 
            Font-Names="Verdana" 
            Font-Size="XX-Small" 
            Text="Find" 
            ToolTip="Find notes that match your criteria (entered to the left of this button)"
            UseSubmitBehavior="false"                
            />

        <script>

            function myfindkey(ctrl, e) {

                var boxtext = ctrl.value   // this gets the text of the control text
                                           // if needed for some reason

                if (e.key == "Enter") {
                    e.preventDefault()   // eat the key (not allow)
                    __doPostBack("cmdFind", "")  // trigger post back + run button code
                }
            }
        </script>

Edit: Or you can use the .click event like this in place of

$('#<%=cmdFind.ClientID%>').click()

I tend to find using the __DoPostBack("my button event","") works better.

However, as noted, we really don't have to have/add a keydown event to the text box, since hitting Enter key will run + trigger the first button in the markup (assuming that button does not have UseSubmitBehavior="false".

So, based on above posted code (you no doubt have more code and markup on the page), then we really don't need any special code at all, and we don't even need the onkeydown event for the text box. One can simply remove the UseSubmitBehavior="false" from the button, and hence that button will run when user hits enter key (or the scanner does).