引导模态焦点不起作用

Posted 2023-05-07

技术标签:

【中文标题】引导模态焦点不起作用【英文标题】：Bootstrap Modal Focus not working 【发布时间】：2016-06-15 23:32:44 【问题描述】：

在制作网页时，我没有在 Bootstrap 模态的“输入”中获得焦点，我尝试了所有方法但没有成功，出现模态但输入没有获得焦点。我用一个简单的模式制作了一个“test.php”，也不起作用。这是“test.php”

<html lang="es">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js">



    <script>


$('#myModal').on('shown.bs.modal', function () 
    $('#referencia').focus();
)


    </script>

</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <input name="referencia" id="referencia" type="text" class="form-control text-uppercase" placeholder="Descripci&oacute;n">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>

如果我在我的服务器上尝试此代码它不起作用，在 unelink.es 服务器上也不起作用，但如果我将相同的代码放在“小提琴”上，则可以正常工作。

知道什么是错的吗？如果我需要其他东西......或者在服务器中安装一些东西。

P.D.对不起我的英语。

【问题讨论】：

也许您的浏览器没有找到 jquery.min.js？！如果您使用 F12/开发者工具/firebug 打开浏览器，您是否在网络视图中看到红色条目？这正是我所做的，它是这样说的：错误：Bootstrap 的 javascript 需要 jQuery.. 但存档在那里。为什么加载不出来？如果我在 Chrome 上尝试它可以工作......一定是 Firefox 的东西。快疯了。 Firefox 可能有什么问题？到目前为止工作正常。尝试将show.bs.modal 脚本放入正文中（也带有<script> 标签）见***.com/a/29369356/459102 【参考方案1】：

试试这个（自动对焦添加到您的链接）：

<input name="referencia" id="referencia" type="text" class="form-control text-uppercase" placeholder="Descripci&oacute;n" autofocus>

或者试试这个：

$('#myModal').on('shown.bs.modal', function () 
    $('#myInput').focus();
)

或者这个：

// Every time a modal is shown, if it has an autofocus element, focus on it.
$('.modal').on('shown.bs.modal', function() 
  $(this).find('[autofocus]').focus();
);

【讨论】：

谢谢你，这让我很开心。 :) 像魅力一样工作特别喜欢 jquery 函数来始终自动对焦。如果用户不小心关闭了模式，则使 UX 保持不变。谢谢你，工作。不幸的是，我以前找不到你的答案。节省了我的时间。【参考方案2】：

试试这个：

$('#modal_id').modal('show').on('shown.bs.modal', function() 
    $('input_element_id').focus();
);

或者试试这个：

$('#modal_id').on('shown.bs.modal', function() 
    $('input_element_id').focus();
);
$('#modal_id').modal('show');

【讨论】：

以上是关于引导模态焦点不起作用的主要内容，如果未能解决你的问题，请参考以下文章

引导模式在 React JS 中不起作用

ng-bootstrap 打开焦点输入字段 css 不起作用

Angular Bootstrap 模态弹出自动对焦不起作用

添加命名空间后，引导模式不起作用

引导模式隐藏不起作用

表单验证在引导程序中不起作用