Question

当模态关闭时，如何在输入内选择文本？下面的代码正常工作 - 当我点击输入字段时，警报即将出现并且文本被选中。显示模态隐藏事件警报，但未选中该文本。这是怎么回事？

JS代码：

// Sellect text
$('.user').on('click', '#name', function(){
        $(this).select();
        alert(1);
    });
$('#myModal').on('hide.bs.modal', function(){

    $('.user').find('#name').trigger('click');

});

HTML

<div class="user">
  <p>Name
        <input type="text" name="name" id="name" value="<?php echo $user->name ?>" readonly="readonly">
  </p>
</div>

解

我发现不使用 hide.bs.modal 事件，而是使用 hidden.bs.modal 事件。在这种情况下，脚本正在运行。

Answer 1

.focus由于某种原因不起作用，它将不允许您在完全卸载模态之前聚焦元素。我甚至尝试将事件更改为hide.bs.modal，它在hide.bs.modal之后触发，并不重要。

我发现的一个解决方法是使用setInterval并检查一旦它没有激活焦点事件，身体是否具有类“模态打开”

$('#myModal').on('hidden.bs.modal', function() {
  var waitForClose = window.setInterval(function() {
    if ($('body').hasClass('modal-open') == false) {
      $('.user').find('#name').trigger('focus');
      window.clearInterval(waitForClose)
    }
  }, 100);
});

http://jsfiddle.net/SeanWessell/61sc4Ldr/

Answer 2

我发现不是使用hide.bs.modal事件，而是使用hidden.bs.modal事件。在这种情况下，脚本正在运行。

Answer 3

不确定您所指的文字字段在哪里。在模态元素与否。假设您已在脚本中指定文档已准备就绪（$(document).ready(..)，或在html中创建html元素后加载该脚本）您可以尝试在close事件中调用$( "#name" ).focus(function() { $(this).select(); } );。

Jquery，Bootstrap - 在模态隐藏时触发单击事件并在输入中选择文本

3 个答案: