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

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?

Bootstrap input-group-btn fire on keypress enter

1 solution

Solution 1

Add your solution here

Preview 0

Bootstrap input-group-btn fire on keypress enter

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us