Bootstrap Модальные входы теряют фокус при нажатии

Я работаю над двумя модальными модулями, которые оба лежат на одной странице. Bootstrap 2.3.2Bootstrap Модальные входы теряют фокус при нажатии

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

Я нашел некоторые подобные проблемы там, но ни одно из их решений для меня не работало до сих пор. Вот что я пытался:

1.)

$('#Modal').focus(function (e) { 
     e.preventDefault(); 
});

2.) Кое-что о удалении "в" классе на модальный, что шахта не имеет

3.) Пытаюсь чтобы прокомментировать часть кода начальной загрузки, который в любом случае не является идеальным решением, не смог найти точный фрагмент кода, но что-то подобное, но это не сработало.

4.) Оба фокуса фокусировки на входе (который работает до тех пор, пока что-то не щелкнули), и снова предотвратите по умолчанию.

$('#Modal').on('shown', function (e) { 
     e.preventDefault(); 
     $('#textArea').focus(); 
});

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

источник

2014-01-08 DeiasR

, пожалуйста, посмотрите на это http://stackoverflow.com/questions/11634809/twitter-bootstrap-focus-on -textarea-inside-a-modal-on-click – SivaRajini

Я видел этот вопрос, который спрашивает, как получить фокус, когда отображается модальный, а не почему вход теряет фокус на щелчке. – DeiasR

setTimeout (функция() { $ ("# textArea"). Focus(); }, 1); http://stackoverflow.com/questions/11210552/ie-loses-focus-on-input-field-in-modal – SivaRajini

Ошибка в этой же проблеме, похоже, связана с функциональностью Bootstraps «blue highlight on focus». Лично я не заботился о его потере, но, по общему признанию, не смог найти способ «отключить» стиль, используя «! Important», не применяя ни одного стиля и т. Д. Поэтому в конце концов это обходное решение, но оно разрешило это конкретный вопрос ...

чтобы обойти, я закомментирована в CSS в моем файле bootstrap.css, что подводимая к очагу pseudoclass для входных элементов:

/* 
textarea:focus, 
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="datetime"]:focus, 
input[type="datetime-local"]:focus, 
input[type="date"]:focus, 
input[type="month"]:focus, 
input[type="time"]:focus, 
input[type="week"]:focus, 
input[type="number"]:focus, 
input[type="email"]:focus, 
input[type="url"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus, 
input[type="color"]:focus, 
.uneditable-input:focus { 
    border-color: rgba(82, 168, 236, 0.8); 
    outline: 0; 
    outline: thin dotted \9; 

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
} */

источник

2014-01-27 22:18:23 ewitkows

я столкнулся именно этот вопрос, и я думаю, Я понял.

Что пошло не так

Я предполагаю, что ваш модальный был создан с классом «замирания», так что он будет переходить в и, но очень первый переход в не делает хорошо " слайд ". Это то, что происходило для меня, по крайней мере.

Все сводилось к этому коду в bootstrap.js модального класса игровая (в функции show):

var transition = $.support.transition && that.$element.hasClass('fade') 
... 
transition ? 
    that.$element.one($.support.transition.end, function() { 
    that.$element.focus().trigger('shown') 
    }) : 
    that.$element.focus().trigger('shown')

Что это означает, что если вы хотите переходы на ваш модальной, он будет ждать " переход », прежде чем заставить сосредоточиться на модальном и инициировать свое« показанное »событие.

С тех пор, как первый вступительный переход не был фактически переходом, он никогда не запускал событие конца перехода, так что обратный вызов просто сидел рядом, ожидая следующего, который в итоге появился из синего эффекта свечения в текстовом поле, поскольку он получили фокус.

Свечение в текстовом поле перешло в, инициировав событие конца перехода, которое было уловлено обработчиком конца бутстрап-перехода, которое в этот момент принудительно сосредоточилось на элементе модального элемента и вызвало «показанное» событие.

Санация

Для меня, фиксируя проблемы свелись к удалению "in" класса на моем модальном элементе, но вы упоминали в пункте № 2, что у Вас не было этого.

Более общее исправление, которое может сработать для вас, заключается в том, чтобы остановить событие конца перехода от пузырьков до точки, в которой слушатель модального канала будет слышать его. Что-то вдоль линий этого:

$textField.on($.support.transition.end, function(e){ 
    e.stopPropagation() 
})

Таким образом, модальный мы надеемся получить некоторые другие переход конечного события (например, когда он переходит, вы можете увидеть, что обжиг «показанный» событие в этой точке), в что указывает на то, что он снова синхронизируется с самим собой (что объясняет, почему это произошло только в первый раз, когда вы открыли модальный).

Я надеюсь, что это сработает и для вас! Я знаю, что вопрос старше года, но, возможно, он поцарапает это летнее любопытство;)

источник

2015-03-27 20:40:26 Dylan

Bootstrap Модальные входы теряют фокус при нажатии

ответ

Смежные вопросы