Javascript 一旦出现，如何在 Bootstrap 模式中为特定字段设置焦点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12190119/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set the focus for a particular field in a Bootstrap modal, once it appears
提问by jdkealy
I've seen a couple of questions in regards to bootstrap modals, but none exactly like this, so I'll go ahead.
我已经看到了一些关于引导模式的问题，但没有一个完全像这样，所以我会继续。
I have a modal that I call onclick like so...
我有一个模态，我像这样调用 onclick ......
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
});
This works fine, but when I show the modal I want to focus on the first input element... In may case the first input element has an id of #photo_name.
这很好用，但是当我显示模式时，我想专注于第一个输入元素......在可能的情况下，第一个输入元素的 id 为 #photo_name。
So I tried
所以我试过了
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
$("input#photo_name").focus();
});
But this was to no avail. Lastly, I tried binding to the 'show' event but even so, the input won't focus. Lastly just for testing, as I had a suspiscion this is about the js loading order, I put in a setTimeout just to see if I delay a second, will the focus work, and yes, it works! But this method is obviously crap. Is there some way to have the same effect as below without using a setTimeout?
但这无济于事。最后，我尝试绑定到 'show' 事件，但即便如此，输入也不会聚焦。最后只是为了测试，因为我怀疑这是关于 js 加载顺序的，所以我设置了一个 setTimeout 只是为了看看我是否延迟一秒钟，焦点是否有效，是的，它有效！但这种方法显然是废话。有没有什么方法可以在不使用 setTimeout 的情况下获得与下面相同的效果？
$("#modal-content").on('show', function(event){
window.setTimeout(function(){
$(event.currentTarget).find('input#photo_name').first().focus()
}, 0500);
});
回答by gaurang171
Try this
尝试这个
Here is the old DEMO:
这是旧的演示：
EDIT:(Here is a working DEMOwith Bootstrap 3 and jQuery 1.8.3)
编辑：（这是一个使用 Bootstrap 3 和 jQuery 1.8.3的工作演示）
$(document).ready(function() {
$('#modal-content').modal('show');
$('#modal-content').on('shown', function() {
$("#txtname").focus();
})
});
Starting bootstrap 3 need to use shown.bs.modal event:
启动bootstrap 3需要使用shown.bs.modal事件：
$('#modal-content').on('shown.bs.modal', function() {
$("#txtname").focus();
})
回答by David Beck
Just wanted to say that Bootstrap 3 handles this a bit differently. The event name is "shown.bs.modal".
只是想说 Bootstrap 3 处理这个有点不同。事件名称是“shown.bs.modal”。
$('#themodal').on('shown.bs.modal', function () {
$("#txtname").focus();
});
or put the focus on the first visible input like this:
或将焦点放在第一个可见的输入上，如下所示：
.modal('show').on('shown.bs.modal', function ()
{
$('input:visible:first').focus();
})
回答by Joe Beams
I am using this in my layout to capture all modals and focus on the first input
我在我的布局中使用它来捕获所有模态并专注于第一个输入
$('.modal').on('shown', function() {
$(this).find('input').focus();
});
回答by Alejandro Fiore
I had the same problem with bootstrap 3, focus when i click the link, but not when trigger the event with javascript. The solution:
我在引导程序 3 中遇到了同样的问题，当我单击链接时聚焦，但在使用 javascript 触发事件时却没有。解决方案：
$('#myModal').on('shown.bs.modal', function () {
setTimeout(function(){
$('#inputId').focus();
}, 100);
});
Probably it′s something about the animation!
可能是关于动画的东西！
回答by Michal Macejko
I had problem to catch "shown.bs.modal" event.. And this is my solution which works perfect..
我在捕获“shown.bs.modal”事件时遇到问题..这是我的解决方案，效果很好..
Instead simple on():
取而代之的是简单的 on()：
$('#modal').on 'shown.bs.modal', ->
Use on() with delegated element:
将 on() 与委托元素一起使用：
$('body').on 'shown.bs.modal', '#modal', ->
回答by SAPikachu
Seems it is because modal animation is enabled (fadein class of the dialog), after calling .modal('show'), the dialog is not immediately visible, so it can't get focus at this time.
好像是因为开启了模态动画（fade在对话框的类中），调用之后.modal('show')，对话框不是立即可见的，所以此时无法获得焦点。
I can think of two ways to solve this problem:
我可以想到两种方法来解决这个问题：
- Remove
fadefrom class, so the dialog is immediately visible after calling.modal('show'). You can see http://codebins.com/bin/4ldqp7x/4for demo. (Sorry @keyur, I mistakenly edited and saved as new version of your example) - Call
focus()inshownevent like what @keyur wrote.
fade从类中删除，因此在调用.modal('show'). 您可以查看http://codebins.com/bin/4ldqp7x/4进行演示。（对不起@keyur，我错误地编辑并保存为您示例的新版本）- 呼叫
focus()在shown事件像什么@keyur写道。
回答by Danilo Colasso
I've created a dynamic way to call each event automatically. It perfect to focus a field, because it call the event just once, removing it after use.
我创建了一种动态方式来自动调用每个事件。聚焦一个字段是完美的，因为它只调用一次事件，使用后将其删除。
function modalEvents() {
var modal = $('#modal');
var events = ['show', 'shown', 'hide', 'hidden'];
$(events).each(function (index, event) {
modal.on(event + '.bs.modal', function (e) {
var callback = modal.data(event + '-callback');
if (typeof callback != 'undefined') {
callback.call();
modal.removeData(event + '-callback');
}
});
});
}
You just need to call modalEvents()on document ready.
您只需要调用modalEvents()准备好的文件。
Use:
用：
$('#modal').data('show-callback', function() {
$("input#photo_name").focus();
});
So, you can use the same modal to load what you want without worry about remove events every time.
因此，您可以使用相同的模式来加载您想要的内容，而不必担心每次都删除事件。
回答by edercortes
I had the same problem with the bootstrap 3 and solved like this:
我在 bootstrap 3 上遇到了同样的问题，解决方法如下：
$('#myModal').on('shown.bs.modal', function (e) {
$(this).find('input[type=text]:visible:first').focus();
})
$('#myModal').modal('show').trigger('shown');
回答by bharat
Bootstrap has added a loaded event.
Bootstrap 添加了一个加载事件。
https://getbootstrap.com/docs/3.3/javascript/#modals
https://getbootstrap.com/docs/3.3/javascript/#modals
capture the 'loaded.bs.modal' event on the modal
在模态上捕获 'loaded.bs.modal' 事件
$('#mymodal').on('loaded.bs.modal', function(e) {
// do cool stuff here all day… no need to change bootstrap
})
回答by AdminDev826
Bootstrap modal show event
Bootstrap 模态显示事件
$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();
})
})
