javascript - 从 span 元素中移除焦点

Question

我在 jsfiddle 下面，我尝试了这个SO 问题中提到的几种方法，但是在单击 jquery 确认取消按钮后，我无法从“反馈”范围中移除焦点。

脚步：

1. 点击反馈
2. 单击弹出窗口上的取消按钮
3. 反馈范围再次显示tippy js 提示框。

我已经尝试过 jquery blur 和 document.activeElement.blur() 但它不起作用。

$(document).ready(function() {
  tippy('#feedback', {
    placement: 'right',
    arrow: true,
    content: "Share your feedback."
  });
});

$('#feedback').click(function() {
  $.confirm({
    title: 'Feedback',
    useBootstrap: false,
    content: '' +
      '<form action="" class="formName">' +
      '<div class="form-group">' +
      '<input type="text" class="name form-control" required />' +
      '</div>' +
      '</form>',
    buttons: {
      formSubmit: {
        text: 'Send Feedback',
        btnClass: 'btn-blue',
        action: function() {

        }
      },
      cancel: function() {
        // $("#feedback").blur();
        // document.activeElement.blur();
      }
    }
  });
});

<script type="text/javascript" src="https://unpkg.com/popper.js@1"></script>
<script type="text/javascript" src="https://unpkg.com/tippy.js@4"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/craftpip/jquery-confirm/master/css/jquery-confirm.css">
<script type="text/javascript" src="https://rawgit.com/craftpip/jquery-confirm/master/js/jquery-confirm.js"></script>
<span id="feedback" style="cursor:pointer;">
  feedback
</span>

https://jsfiddle.net/sw8gpuoa/1/

Answer 1

希望这对您有所帮助。当点击事件发生时我会失去焦点并且它似乎有效。

$('#feedback').click(function() {
    $(this).blur(); // unfocus when click event occur
    $.confirm({
                title: 'Feedback',
                useBootstrap: false,
                content: '' +
                    '<form action="" class="formName">' +
                    '<div class="form-group">' +
                    '<input type="text" class="name form-control" required />' +
                    '</div>' +
                    '</form>',
                buttons: {
                    formSubmit: {
                        text: 'Send Feedback',
                        btnClass: 'btn-blue',
                        action: function () {

                        }
                    },
                    cancel: function () {
                    }
                }
            });
});

Answer 2

问题是因为默认触发器tippy是click和focus。因此，当模式被关闭时，当焦点返回到元素时会再次显示工具提示。

要解决此问题，请将trigger属性设置为'click mouseenter'. 删除focus将解决您的问题。添加mouseenter意味着工具提示将在悬停时显示，但如果您不需要该行为，可以将其删除。

jQuery(function($) {
  tippy('#feedback', {
    trigger: 'click mouseenter', // add this property
    placement: 'right',
    arrow: true,
    content: "Share your feedback."
  });

  $('#feedback').click(function() {
    $.confirm({
      title: 'Feedback',
      useBootstrap: false,
      content: '<form action="" class="formName"><div class="form-group"><input type="text" class="name form-control" required /></div></form>',
      buttons: {
        formSubmit: {
          text: 'Send Feedback',
          btnClass: 'btn-blue',
          action: function() {
            // do something...
          }
        },
        cancel: function() {
          // do something...
        }
      }
    });
  });
});

#feedback {
  outline: 0;
}

<script type="text/javascript" src="https://unpkg.com/popper.js@1"></script>
<script type="text/javascript" src="https://unpkg.com/tippy.js@4"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/craftpip/jquery-confirm/master/css/jquery-confirm.css">
<script type="text/javascript" src="https://rawgit.com/craftpip/jquery-confirm/master/js/jquery-confirm.js"></script>
<span id="feedback" style="cursor:pointer;">
  feedback
</span>

另请注意，我将所有 jQuery 逻辑放在一个 document.ready 处理程序中；你不需要多个。