从span元素中移除焦点

Question

我已经尝试了一些在this中提到的方法，但是我无法在单击jquery按钮后将焦点从“反馈”span中移除。

步骤：

1. 点击反馈
2. 单击弹出窗口上的“取消”按钮
3. 反馈跨度再次显示提示框。

我尝试过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

希望这能帮到你。当单击事件发生时，我无法集中注意力，而且它看起来很有效。

$('#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处理程序中；您不需要多个逻辑。