Jquery，Bootstrap-触发模式隐藏上的点击事件，并在输入中选择文本

Jquery, Bootstrap - trigger click event on modal hide and select text in input

本文关键字：事件 输入 文本 选择 Bootstrap- 模式 隐藏 Jquery      更新时间：2023-09-26

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

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事件，不如使用hide.bs.modal

.focus由于某些原因无法工作，在模态完全卸载之前，它不允许您聚焦元素。我甚至尝试将事件更改为hidden.bs.modal，它在hide.bs.modal之后启动，但这无关紧要。

我找到的一个解决方法是使用setInterval并检查主体是否具有类"modal open"，一旦它没有，则触发焦点事件

$('#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/

我发现不应该使用hide.bs.modal事件，而应该使用hidden.bs.modal事件。在这种情况下，脚本正在工作。

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

相关文章：