在文本框中按下Enter时的jQuery执行功能

Question

        $(document).keypress(function(e) {
            if(e.which == 13) {
                $("#submitButton").click(); 
            }
        });

Thats what I have to execute my function when enter is pressed anywhere in a page, but that conflicts with my dropdown list keyboard navigation .

<div class="form-group" id="contractGroup">
                <label for="inputContract" class="col-sm-5 control-label">Contract Type <b>*</b></label>
                <div class="col-sm-7">
                    <div class="input-group" id="contractPicker">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Full-time</a></li>
                                <li><a href="#">Part-time</a></li>
                            </ul>
                        </div>
                        <asp:TextBox runat="server" type="text" class="form-control" ID="inputContract" placeholder="Full time, Part time"></asp:TextBox>
                    </div>
                </div>
            </div>

When trying to tab through dropdown list , you have to use enter to select item, which executes my function at same time as well, which I dont want.

I know its possible to do function for each textbox checking if enter was pressed while that textbox have focus, but I have over 20+ and would rather avoid that. And I know that I can use asp:panel defaultbutton but that ignores my jquery function and calls codebehind and not jquery function as I have 2 linking buttons act as one and one of them cannot be asp:button which is needed for asp:panel .

Another solution is to somehow to make dropdown list treated differently and not as "current page". I am using bootstrap datepicker and while keyboard navigating through calendar popup, I can use enter without calling my function. If its possible I would love to have single function that detects if enter was pressed on any textbox on a page. Cheers

Answer 1

Try adding an id to the dropdown div and have a click listener tied to it to prevent it from bubbling up. Something like...

$("#dropdown-list").keypress(function(e) {
            e.preventDefault();
        });