按键输入时bootstrap input-group-btn fire [英] Bootstrap input-group-btn fire on keypress enter

问题描述

嘿，



我有几个bootstrap风格的输入控件，附带input-group-btn（通常是搜索）。



我很惊讶bootstrap.js没有将输入按键绑定到按钮点击输入，所以我自己做了：



< a href =https://jsfiddle.net/mjy9fjdo/5/> Boostrap btn addon clickOnEnter - JSFiddle [ ^ ]（抱歉Angular和JQuery的奇怪组合。我永远无法决定使用哪个）



太好了，现在我简化了JSFiddle中的问题，我对我的解决方案更有信心。



无论如何，这就是我想知道的：

1：不引导绑定此事件吗？我是否必须做些什么才能让它受到限制？

2：如果没有：你能改进我的代码吗？我讨厌像这样循环遍历所有控件。这么多，以便我可以将这些输入转换为指令。



谢谢^ _ ^

Andy



我的尝试：



Boostrap btn addon clickOnEnter - JSFiddle [ ^ ]

这比我的代码更整洁，但现在我在我的主页面中使用这种方式绑定此类型的所有控件

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

推荐答案

为什么Bootstrap没有将enter键绑定到按钮是可以理解的。除了你可能不想要这种行为之外，你可能在一个输入组中也有多个按钮，并且无法确定应该点击哪个按钮。



一点点jQuery会很好地整理你的代码：

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 ）{

(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（）;
}
} ）;

(this).closest(".input-group").find("div.btn").click(); } });

Boostrap btn addon clickOnEnter - JSFiddle [ ^ ]

这篇关于按键输入时bootstrap input-group-btn fire的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！