Twitter 引导程序 - 单击时专注于模态内的 textarea

IT技术 javascript jquery twitter-bootstrap focus textarea
2021-03-08 15:14:11

刚开始玩 bootstrap，真是太棒了。

我正在努力解决这个问题。我在模态窗口中有一个用于反馈的文本区域。它工作得很好。但是我希望当您单击按钮激活模态时将焦点放在 textarea 上。我似乎无法让它工作。

这是一个小提琴：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();
});​

恢复 当我单击“启动模态”时，我希望显示模态并将焦点放在 textarea 上。

谢谢你的帮助。

6个回答

它不起作用，因为当您单击按钮时，模态尚未加载。您需要将焦点挂钩到一个事件，然后转到引导程序的模态页面，我们会看到该事件shown，即is fired when the modal has been made visible to the user (will wait for css transitions to complete). 而这正是我们想要的。

试试这个：

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

这是你的小提琴更新：http : //jsfiddle.net/5JN9A/5/

更新：

正如@MrDBA 所指出的，在 Bootstrap 3 中，事件名称更改为shown.bs.modal. 因此，对于 Bootstrap 3 使用：

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

Bootstrap 3 的新小提琴：http : //jsfiddle.net/WV5e7/

注意事项：如果您的模态具有“淡入淡出”属性，则此方法可能不起作用，具体取决于似乎是一些非常模糊的时间条件（即，模态不存在足以接受焦点请求，直到它完全淡出）。我只能通过删除淡入淡出属性来将焦点设置在模式项上，此时我可以在 .show() 调用之后立即执行 $('#textareaID').focus() 调用。YMMV，我想...
2021-04-21 15:14:11
谢谢吉姆，为什么没有设置焦点真的让我很烦恼，但这是因为我有一个淡入。如果有解决办法就好了。
2021-04-21 15:14:11
@chrisb 你的意思是fade在你的模态中添加一个类？它对我有用：jsfiddle.net/5JN9A/16如果我能看到一个失败的例子，我可以尝试找到一个解决方法：P
2021-04-28 15:14:11
注意事件名称。它必须是“shown.bs.modal”，而不是“show.bs.modal”。顺便说一下，从 Chrome 中的控制台设置焦点不起作用，因为页面窗口未处于活动状态。要解决它，您可以使用 setTimeout
2021-05-05 15:14:11
仅供参考 Bootstrap v3 已将事件名称更改为 show.bs.modal
2021-05-06 15:14:11

我想要一个声明性版本，所以我选择了以下内容： 

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

然后，您可以简单地将 data-modalfocus 属性添加到您的字段中，如下所示：

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

当模态弹出时，您的字段将获得焦点。

引导程序3

$(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);
});
Bootstrap3 的优秀通用修复。高能量！
2021-05-01 15:14:11
我的模态逐渐消失，所以我不得不将超时增加到 500 毫秒，但除此之外，这很好用。
2021-05-14 15:14:11

您可以使用autofocushtml 元素来设置自动对焦。

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

在这里小提琴（点击）

这仅适用于第一次。当对话框关闭（隐藏）并再次显示时，字段不会获得焦点。
2021-05-09 15:14:11

如果您的模态具有 'fade' 属性：

这将起作用，但您可能需要调整超时的持续时间以及显然需要的 ID：

$("#ID-of-modal").on('show', function(event){
                window.setTimeout(function(){
                  $(event.currentTarget).find('input#ID-of-input').first().focus()
                }, 0175);
              });
其它你可能感兴趣的问题
上一篇如何使用 jQuery 的 drop 事件上传从桌面拖拽的文件？ 下一篇如何监听子窗口关闭？