Bootstrap input-group-btn fire on keypress enter

Question

0.00/5 (No votes)

See more:

Hey,

I have several bootstrap styled input controls with input-group-btn's attached (usually searches).

I was suprised that bootstrap.js didn't bind input keypress "enter" to the button click, so I did it myself:

Boostrap btn addon clickOnEnter - JSFiddle[^] (sorry for the weird mix of Angular and JQuery. I can never decide which to use)

Great, now that I simplify the issue in JSFiddle, I'm more confident with my solution.

Anyway, here's what I wanted to know:
1: Doesn't bootstrap bind this event? Do I have to do something to get it bound?
2: If not: Can you improve my code. I hate looping through all controls like this. So much so that I may turn these inputs into a directive.

Thanks ^_^
Andy

What I have tried:

Boostrap btn addon clickOnEnter - JSFiddle[^]
This is a lot tidier that my code was, but this is now what I use in my Master page to bind all controls of this type this way

Posted 17-Jan-17 2:56am

Andy Lanng

Updated 17-Jan-17 4:39am

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2017-01-17T04:39:00

Solution 1

It's understandable why Bootstrap doesn't bind the "enter" key to the button. Apart from the fact that you might not want that behaviour, you might also have multiple buttons within a single input group, and there would be no way to tell which button should be clicked.

A little bit of jQuery will tidy your code up nicely:

$(document).on("keypress", ".input-group:has(input:input, span.input-group-btn:has(div.btn)) input:input", function(e){
    if (e.which == 13){
        $(this).closest(".input-group").find("div.btn").click();
    }
});

Boostrap btn addon clickOnEnter - JSFiddle[^]

Posted 17-Jan-17 4:39am

Richard Deeming

Comments

Andy Lanng 17-Jan-17 11:25am

Good points and nice cleanup - Thanks RD ^_^

nsmcan 6-Feb-20 14:19pm

Beware of such generic handler! When you have a large web page with many controls, it would slow your page down considerably.

Richard Deeming 6-Feb-20 14:24pm

It's using a delegated event, so the overhead is considerably lower than attaching an event handler to every element.

Direct and delegated event handlers | .on() | jQuery API Documentation[^]

nsmcan 7-Feb-20 20:09pm

I have a quite extensive single page application. After adding this chunk of code, which I did like, I saw that when typing, each character takes 300-400 ms to be processed. And if an input field has bootstrap validator attached, it will stuck much worse

nsmcan 7-Feb-20 20:32pm

This part ".input-group:has(input:input, span.input-group-btn:has(div.btn)) input:input" is heavy.
jQuery, in the article you provided, recommends avoiding such selectors.
I would make it simpler:

$(document).on("keypress", "input.form-control", function(e){
    if (e.which == 13){
        $(this).parent(".input-group").find("div.btn").click();
    }
});

Richard Deeming 10-Feb-20 4:44am

That's a good idea, but the handler might match more elements than the original.

Perhaps it might be better to add a specific marker class to the targeted elements?