从 span 元素中移除焦点

Question

我有下面的 jsfiddle，我尝试了 this SO 问题中提到的几种方法，但是在单击 jquery 确认取消按钮后，我无法从 "feedback" span 中删除焦点.

步骤：

点击反馈
单击弹出窗口中的取消按钮
Feedback span 再次显示 tippy js 提示框。

我尝试了 jquery 模糊和 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

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

要修复此问题，请将 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 处理程序中；你不需要多个。

Answer 2

希望对您有所帮助。当点击事件发生时我注意力不集中，它似乎有效。

$('#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 () {
                    }
                }
            });
});

从 span 元素中移除焦点

Remove focus from the span element

html

javascript

jquery

tippyjs