Javascript Twitter引导-点击模式中的文本区域

刚开始玩bootstrap，这太棒了

我在想办法。我在模态窗口中有一个用于反馈的文本区域。它工作得很好。但我希望当你点击按钮激活模态时，焦点转到文本区域。我似乎无法让它工作

这是一把小提琴：

代码如下：

<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>​

继续 当我点击“启动模式”时，我希望模式显示出来，焦点转到文本区域

---

谢谢您的帮助。

它不起作用，因为当您单击按钮时，尚未加载模式。您需要将焦点挂接到一个事件上，然后转到显示的“我们看到事件”

，
在模式对用户可见时被触发（将等待css转换完成）
。这正是我们想要的

试试这个：

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

这是你的小提琴：


更新：

注意，在Bootstrap 3中，事件名称是to
show.bs.modal
。因此，对于引导3，请使用：

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

引导程序3的新提琴：
如果您的模式具有“淡入”属性：
这将起作用，但您可能必须调整超时的持续时间，并在需要时调整ID：

$("#ID-of-modal").on('show', function(event){
                window.setTimeout(function(){
                  $(event.currentTarget).find('input#ID-of-input').first().focus()
                }, 0175);
              });

我不知道为什么，但选择的解决方案对我不起作用。。
我改为使用以下代码段：

$('#annul-modal').on('show', function() {
    setTimeout(function() {$('textarea:first', '#annul-form').focus();}, 400);
});

我知道它不太漂亮，但至少它能用。。Bootstrap v2.3.0

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

$（函数（）{
$（“#btnmovercategoriaariz”）。单击（函数（）{
$（“#novoPlaylist”）.modal（）；
返回false；
});
});
诺沃播放列表
我在chrome上遇到了重大问题。。。我希望这对某人有帮助

//When user clicks link
$('#login-modal-link').on('click',function() {
        setTimeout(function(){
                //If modal has class
            if ($('#login-modal').hasClass('modal')) {
                //Whatever input you want to focus in
                $('#user_login_modal').focus();
            }
        },100);

    });

您可以使用
autofocus
html元素设置自动对焦

<textarea id="textareaID" autofocus="" ></textarea>



如果您使用的是bootstrap v3，并且同时使用模式对话框和wysihtml5文本编辑器，那么以下功能可以正常工作（假设“basic”是模式表单的ID）：

我希望有一个声明性版本，所以我选择了以下内容：

$(document).ready(function() {
    $(".modal").on('shown.bs.modal', function () {
        $("[data-modalfocus]", this).focus();
    });
});

然后，只需将data modalfocus属性添加到字段中，如下所示：

<input type="text" data-modalfocus />



当模态弹出时，你的场就会聚焦
 Bootstrap3

$(window.document).on('shown.bs.modal', '.modal', function() {
    window.setTimeout(function() {
        $('[autofocus]', this).focus();
    }.bind(this), 100);
});

引导程序2

$(window.document).on('shown', '.modal', function() {
    window.setTimeout(function() {
        $('[autofocus]', this).focus();
    }.bind(this), 100);
});

正如其中一条评论中所提到的，您需要从模式中删除
fade
。
这对我来说很有用：

 <div id="myModal" class="modal">
    ...
    <textarea class="form-control" rows="5" id="note"></textarea>
  </div>

  <script>
    $('#myModal').on('shown.bs.modal', function () {
        $('#note').focus();
    })
  </script>


...
$（'#myModal'）.on（'show.bs.modal'，function（）{
$（'#note'）.focus（）；
})
将事件直接附加到模式屏幕对我不起作用。我使用的是以下代码：

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

有了这段代码，我只需要更改控件id的myField，我想获得焦点，它还允许我为多模式屏幕定义焦点，我有如下功能：

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

来源
发现正在执行以下操作：

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

工作得很好，因为它只找到第一个表单控件，而不需要特定的id等。这正是大多数时候需要的。
我想要一些更通用的东西

    $(window.document).on('shown.bs.modal', '.modal', function () {
        var timer = window.setTimeout(function () {
            $('.firstInput', this).focus();
            typeof timer !== 'undefined' && window.clearTimeout(timer);
        }.bind(this), 100);
    });

有了这个，我就可以给CSS类firstInput任何我想要的控制。
设置焦距时有一点延迟，这给了它一定的天赋。
注意：如果你的模式有“淡入”属性，这种方法可能不起作用，这取决于一些非常模糊的计时条件（例如，在完全淡入之前，模式不足以接受焦距请求）。我只能通过删除淡入淡出属性来设置模式项的焦点，此时我可以在.show（）调用之后立即执行$（'#textareaID'）.focus（）调用。YMMV，我想…谢谢Jim，我真的很烦为什么没有设置焦点，但那是因为我有一个淡入。如果有解决办法那就太好了。@chrisb你是说给你的模型添加一个
fade
类？这对我很有用：如果我能看到一个失败的例子，我可以尝试找到一个解决方法：PFYI引导v3已将事件名称更改为show.bs.modalPay注意事件名称。它必须是“show.bs.modal”，而不是“show.bs.modal”。顺便说一句，在Chrome中从控制台设置焦点不起作用，因为页面窗口未激活。为了解决这个问题，你可以使用SetTimeOut。你应该对你所做的事情发表一些评论，而不是强迫人们去寻找这些变化。所有的回答都因为某种原因无效。。因此，上面的文章是我的解决方案，只是有人和我有相同的问题。在jQuery 1.10.2 | Bootstrap v3.0.3中进行了测试。这只是第一次有效。当对话框关闭（隐藏）并再次显示时，字段不会收到焦点。为什么不使用direct$（“#myField”）.focus可能存在重复？YvesMartin您是对的，应该只有一个id具有相同的名称，当您指出Yes时，应该选择该id！这很有效。我在模态上直接尝试了
“show.bs.modal”
（即
“#modalName”
），但事件没有被触发。把它移到身体上就行了。不幸的是，这意味着您不知道在没有测试的情况下会触发哪个模态。。。或者，当您这样做时，设置任何模式的第一项的焦点。我的模式会淡入，因此我必须将超时增加到500毫秒，但除此之外，这非常有效。Bootstrap3的出色通用修复程序。高能量！
$(document).on('shown.bs.modal', function () {
  $(this).find('.form-control:visible:first').focus();
});

    $(window.document).on('shown.bs.modal', '.modal', function () {
        var timer = window.setTimeout(function () {
            $('.firstInput', this).focus();
            typeof timer !== 'undefined' && window.clearTimeout(timer);
        }.bind(this), 100);
    });