Andy Lanng Ответов: 1

Bootstrap input-group-btn fire on keypress enter

Эй,

У меня есть несколько элементов управления вводом в стиле bootstrap с прикрепленными элементами ввода input-group-btn (обычно поиск).

Я был удивлен, что bootstrap.js не привязывал нажатие клавиши ввода "enter" к нажатию кнопки, поэтому сделал это сам:

Boostrap btn addon clickOnEnter - JSFiddle[^] (извините за странную смесь Angular и JQuery. Я никогда не могу решить, что использовать)

Отлично, теперь, когда я упростил проблему в JSFiddle, я более уверен в своем решении.

Во всяком случае, вот что я хотел узнать:
1: разве bootstrap не связывает это событие? Должен ли я что-то сделать, чтобы связать его?
2: Если нет: можете ли вы улучшить мой код? Я ненавижу зацикливаться на всех элементах управления, как это. Настолько, что я могу превратить эти входные данные в директиву.

Спасибо ^_^
Энди

Что я уже пробовал:

Boostrap btn addon clickOnEnter - JSFiddle[^]
Это намного опрятнее, чем мой код, но теперь это то, что я использую на своей главной странице, чтобы связать все элементы управления этого типа таким образом

1 Ответов

Рейтинг:
8

Richard Deeming

Понятно, почему Bootstrap не привязывает клавишу "enter" к кнопке. Помимо того, что вы можете не хотеть такого поведения, у вас также может быть несколько кнопок в одной группе ввода, и вы не сможете определить, на какую кнопку следует нажать.

Немного jQuery будет привести в порядок свой код красиво:

$(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[^]

Andy Lanng

Хорошие моменты и хорошая уборка-спасибо РД ^_^

nsmcan

Остерегайтесь такого универсального обработчика! Когда у вас есть большая веб-страница с большим количеством элементов управления, это значительно замедлит работу вашей страницы.

Richard Deeming

Он использует делегированное событие, поэтому накладные расходы значительно ниже, чем прикрепление обработчика событий к каждому элементу.

Прямые и делегированные обработчики событий|. on() | jQuery API Documentation[^]

nsmcan

У меня есть довольно обширное одностраничное приложение. После добавления этого куска кода, который мне действительно понравился, я увидел, что при наборе текста каждый символ обрабатывается за 300-400 МС. А если к полю ввода прикреплен валидатор bootstrap, то он застрянет гораздо хуже

nsmcan

Эта часть ".входные группы:есть(вход:вход, пролет.входные-группы-БТН:есть(див.БТН)) входной сигнал:входной сигнал" быть тяжело.
jQuery в предоставленной вами статье рекомендует избегать таких селекторов.
Я бы сделал это проще:

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

Richard Deeming

Это хорошая идея, но обработчик может соответствовать большему количеству элементов, чем оригинал.

Возможно, было бы лучше добавить определенный класс маркеров к целевым элементам?