一旦出现,如何在Bootstrap模式中为特定字段设置焦点

2020/10/20 21:21 · javascript ·  · 0评论

我已经看到了一些有关引导程序模式的问题,但是没有一个完全像这样,所以我继续。

我有一个模态,我这样称呼onclick ...

$(".modal-link").click(function(event){
  $("#modal-content").modal('show');
});

效果很好,但是当我显示模态时,我想关注第一个输入元素...在某些情况下,第一个输入元素的ID为#photo_name。

所以我尝试了

   $(".modal-link").click(function(event){
     $("#modal-content").modal('show');
     $("input#photo_name").focus();
   });

但这无济于事。最后,我尝试绑定到“ show”事件,但是即使如此,输入也不会集中。最后,仅出于测试目的,因为我怀疑这与js加载顺序有关,因此我设置了setTimeout只是为了查看是否延迟一秒钟,焦点会起作用,是的,它起作用了!但是这种方法显然是胡扯。有什么方法可以在不使用setTimeout的情况下达到与以下相同的效果?

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

尝试这个

这是旧的DEMO

编辑:(
这是
使用Bootstrap 3和jQuery 1.8.3的有效
演示版

$(document).ready(function() {
    $('#modal-content').modal('show');
    $('#modal-content').on('shown', function() {
        $("#txtname").focus();
    })
});

启动引导程序3需要使用shown.bs.modal事件:

$('#modal-content').on('shown.bs.modal', function() {
    $("#txtname").focus();
})

只是想说Bootstrap 3处理这个问题有所不同。事件名称为“ shown.bs.modal”。

$('#themodal').on('shown.bs.modal', function () {
   $("#txtname").focus();
});

或将焦点放在第一个可见的输入上,如下所示:

.modal('show').on('shown.bs.modal', function ()
{
    $('input:visible:first').focus();
})

http://getbootstrap.com/javascript/#modals

我在布局中使用它来捕获所有模态,并专注于第一个输入

  $('.modal').on('shown', function() {
     $(this).find('input').focus();
  });

I had the same problem with bootstrap 3, focus when i click the link, but not when trigger the event with javascript.
The solution:

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

Probably it´s something about the animation!

我遇到了“ shown.bs.modal”事件的问题。这是我的完美解决方案。

而是简单的on():

$('#modal').on 'shown.bs.modal', ->

将on()与委托元素一起使用:

$('body').on 'shown.bs.modal', '#modal', ->

似乎是因为启用了模态动画(fade在对话框的类中),调用后.modal('show'),该对话框不会立即可见,因此此时无法获得焦点。

我可以想到两种解决此问题的方法:

  1. fade从类中移除,因此调用后,对话框立即可见.modal('show')您可以查看http://codebins.com/bin/4ldqp7x/4进行演示。(对不起,@ keyur,我错误地将其编辑并另存为示例的新版本)
  2. 像@keyur所写的那样focus()shown事件中调用

我创建了一种动态方式来自动调用每个事件。专注于某个领域非常理想,因为它只调用一次事件,使用后将其删除。

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');
            }
        });
    });
}

您只需要调用modalEvents()文档即可。

用:

$('#modal').data('show-callback', function() {
    $("input#photo_name").focus();
});

因此,您可以使用相同的模式来加载所需的内容,而不必担心每次都会发生remove事件。

我对bootstrap 3遇到了同样的问题,并像这样解决了:

$('#myModal').on('shown.bs.modal', function (e) {
    $(this).find('input[type=text]:visible:first').focus();
})

$('#myModal').modal('show').trigger('shown');

Bootstrap添加了一个加载事件。

https://getbootstrap.com/docs/3.3/javascript/#modals

捕获模态上的“ loaded.bs.modal”事件

$('#mymodal').on('loaded.bs.modal', function(e) {
  // do cool stuff here all day… no need to change bootstrap
})

引导模态秀事件

$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();

})

一个更干净,更模块化的解决方案可能是:

$(document).ready(function(){
    $('.modal').success(function() { 
        $('input:text:visible:first').focus();
    });  
});

或以您的ID为例:

$(document).ready(function(){
    $('#modal-content').modal('show').success(function() {
        $('input:text:visible:first').focus();
    });  
});

希望有帮助。

本文地址:http://javascript.askforanswer.com/yidanchuxianruhezaibootstrapmoshizhongweitedingziduanshezhijiaodian.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!