Twitter Bootstrap - 点击时聚焦模态框内的文本区域

Question

Twitter Bootstrap - 点击时聚焦模态框内的文本区域

javascriptjquerytwitter-bootstrapfocustextarea

70

刚开始尝试使用Bootstrap，感觉非常不错。

我在努力解决一个问题。我有一个反馈的文本框位于模态窗口内，它运作得非常好。但是当你点击按钮激活模态窗口时，我想让焦点放在文本框上，但似乎无法实现。

这里有一个JSFiddle示例：http://jsfiddle.net/denislexic/5JN9A/4/

以下是代码：

<a class="btn testBtn" data-toggle="modal" href="#myModal" >Launch Modal</a>

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
      <textarea id="textareaID"></textarea>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

这里是 JS 代码

$('.testBtn').on('click',function(){
    $('#textareaID').focus();
});

继续当我单击“启动模态框”时，我希望模态框显示并使焦点在文本区域上。

感谢任何帮助。

- denislexic

可能是推特Bootstrap模态输入框焦点的重复问题。 - Muhammad Rehan Saeed

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- J.J · Answer 1

将事件直接附加到模态屏幕上对我不起作用。我改为使用这段代码：

$('body').on('shown.bs.modal', '.modal', function () {
  $('[id$=myField]').focus();
})

使用这段代码，我只需要更改myField的ID以获得我想要聚焦的控件，它还允许我为多个模态屏幕定义焦点，我有类似以下的内容：

      $('body').on('shown.bs.modal', '.modal', function () {
        $('[id$=YesCancel]').focus();
        $('[id$=YesInverted]').focus();
        $('[id$=cancelAddCustomer]').focus();
        $('[id$=closeHistoryModal]').focus();
      });

源代码 http://xcellerant.net/2014/08/06/set-focus-on-a-field-when-showing-a-bootstrap-3-modal/

- SimonKiteley · Answer 2

发现正在执行：

$(document).on('shown.bs.modal', function () {
  $(this).find('.form-control:visible:first').focus();
});

这个很好用，因为它只是寻找第一个表单控件，而不需要特定的 ID 等。大多数情况下都是最需要的。

- Jeremias Pereira · Answer 3

<a href="" id="btnmoverCategoriaRaiz">Mover para a raiz...</a> 
      <script>
         $(function(){
            $("#btnmoverCategoriaRaiz").click(function(){
                $("#novoPlaylist").modal();
                return false;
            });
         });

       </script>    
 <div id="novoPlaylist" class= "modal  hide">
          <div class="modal-header">
            <h3>Novo Playlist</h3>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <?echo $form->input("Playlist.nome", array("label"=>"Nome:")) ?>
            </form>
          </div>
              <div class="modal-footer">
                 <a href="javascript:;" class="btn" data-dismiss="modal">Cancelar</a>
                 <a href="javascript:;" class="btn btn-primary" id="SalvarNomePlaylist" data-loading-text="Aplicando..."> Savar</a>
              </div>
      </div>