Question

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

步骤：

点击反馈
单击弹出窗口上的“取消”按钮
反馈范围再次显示了尖的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处理程序中；您不需要多个。

从span元素中移出焦点

2 个答案: