Twitter引导 – 关注单击模式内的textarea
刚开始玩引导，这是惊人的。
我试图弄清楚这一点。 我有一个模态窗口内的反馈textarea。 它工作很好。 但是当我点击button来激活模态时，我想把焦点放在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。
谢谢你的帮助。
它不起作用，因为当你点击button模式尚未加载。 你需要把焦点挂到一个事件上，然后进入引导程序的模态页面，我们看到显示的事件， is fired when the modal has been made visible to the user (will wait for css transitions to complete) ， 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/
我想要这个声明版本，所以我去了以下：
$(document).ready(function() { $(".modal").on('shown.bs.modal', function () { $("[data-modalfocus]", this).focus(); }); });
然后，您可以简单地将一个data-modalfocus属性添加到您的字段中，如下所示：
<input type="text" data-modalfocus />
而当模式popup时，你的领域将变得焦点。
Bootstrap3
$(window.document).on('shown.bs.modal', '.modal', function() { window.setTimeout(function() { $('[autofocus]', this).focus(); }.bind(this), 100); });
Bootstrap 2
$(window.document).on('shown', '.modal', function() { window.setTimeout(function() { $('[autofocus]', this).focus(); }.bind(this), 100); });
您可以使用autofocus html元素来设置自动对焦。
<textarea id="textareaID" autofocus="" ></textarea>
小提琴在这里（点击）
如果你的模态具有“淡入”属性：
这将工作，但您可能需要调整超时的时间，显然是需要的ID：
$("#ID-of-modal").on('show', function(event){ window.setTimeout(function(){ $(event.currentTarget).find('input#ID-of-input').first().focus() }, 0175); });
我在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); });
正如在其中一个评论中提到的，你需要从你的模式中删除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>
我想要一些更通用的东西
$(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的任何控制。 设定焦点有一点点延迟，使其具有一定的天赋。
我不知道为什么，但select的解决scheme不适合我..我使用下面的代码片段：
$('#annul-modal').on('show', function() { setTimeout(function() {$('textarea:first', '#annul-form').focus();}, 400); });
我知道这不是很漂亮，但至less它工作.. Bootstrap v2.3.0
如果你正在使用bootstrap v3，并且你正在使用modal dialog和wysihtml5文本编辑器，下面的工作（假设#basic是你的模态forms的ID）：
$('#basic').on('shown.bs.modal', function () { editor.composer.element.focus() })
直接将事件附加到模态屏幕对我来说不起作用。 我正在使用这个代码：
$('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/
发现做到：
$(document).on('shown.bs.modal', function () { $(this).find('.form-control:visible:first').focus(); });
工作得很好，因为它只是find了第一个forms控制，而不是需要一个特定的ID等。只是大部分时间需要。
<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>
