如何在显示后如何将焦点设置为引导模式中的第一个文本输入 [英] How to Set focus to first text input in a bootstrap modal after shown

问题描述

我加载了一个动态引导程序模态，它包含很少的文本输入。我遇到的问题是我希望光标集中在此模式中的第一个输入上，并且默认情况下不会发生这种情况。

所以我编写了以下代码来做到这一点：

I load a dynamic bootstrap modal and it contains few text inputs. The issue i face that i want the cursor to focus on the first input in this modal, and this is not happening by default.
So i wrote this code to do it:

$('#modalContainer').on('show', function () {
   $('input:text:visible:first').focus();
});

但是现在它专注于输入，然后自动消失，为什么会这样以及如何解决？

But now it focus on the in the input for a moment then go away automatically, why this is happening and how to solve?

推荐答案

@scumah为您提供了答案： Twitter引导程序-专注于单击模式中的textarea

@scumah has the answer for you: Twitter bootstrap - Focus on textarea inside a modal on click

对于Bootstrap 2

For Bootstrap 2

modal.$el.on('shown', function () {
$('input:text:visible:first', this).focus();
});  

更新：对于Bootstrap 3

Update: For Bootstrap 3

$('#myModal').on('shown.bs.modal', function () {
    $('#textareaID').focus();
})  

=========更新======

========== Update ======

为回答一个问题，如果您指定了不同的数据目标，则可以将其与同一页面上的多个模式一起使用，重命名模式ID以匹配并更新表单输入字段，最后更新您的JS以匹配这些新ID：

参见 http ：//jsfiddle.net/panchroma/owtqhpzr/5/

In response to a question, you can use this with multiple modals on the same page if you specify different data-targets, rename your modals IDs to match and update the IDs of the form input fields, and finally update your JS to match these new IDs:
see http://jsfiddle.net/panchroma/owtqhpzr/5/

HTML

...
<button ... data-target="#myModal1"> ... </button> 
... 
<!-- Modal 1 -->
<div class="modal fade" id="myModal1" ...>
... 

<div class="modal-body"> <textarea id="textareaID1" ...></textarea></div>

JS

$('#myModal1').on('shown.bs.modal', function() {
  $('#textareaID1').focus();
})

这篇关于如何在显示后如何将焦点设置为引导模式中的第一个文本输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！