javascript - 使 iris 的颜色选择器在未聚焦时消失

Question

我的 HTML:

<input type="text" id='color-picker' value="#bada55" /><br />

我的Javascript:

jQuery(document).ready(function($){
    $('#color-picker').iris();
    $('#color-picker').blur(function() {
        $('#color-picker').iris('hide');
    });
    $('#color-picker').focus(function() {
        $('#color-picker').iris('show');
    });
});

我的 JSFiddle:http://jsfiddle.net/vdmw1knL/3/

没有模糊/焦点的东西，如果你点击文本输入，颜色选择器就会出现并且永远不会消失。如果你点击颜色选择器，模糊/聚焦的东西就会出现，但如果你真的选择了一种颜色，它就会消失。

如果颜色选择器附加到的文本输入或 html 组合本身失去焦点，我希望颜色选择器消失。单击颜色选择器中的颜色不应使其消失。不幸的是，我不知道如何让它做到这一点。有什么想法吗？

Answer 1

您可以像这样检查您是在颜色选择器内部还是外部单击:

jQuery(document).ready(function($) {
  $('#color-picker').iris();
  $('#color-picker').blur(function() {
    setTimeout(function() {
      if (!$(document.activeElement).closest(".iris-picker").length)
        $('#color-picker').iris('hide');
      else 
        $('#color-picker').focus();
    }, 0);
  });
  $('#color-picker').focus(function() {
    $('#color-picker').iris('show');
  });
});

<link href="https://raw.githubusercontent.com/Automattic/Iris/master/src/iris.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://automattic.github.io/Iris/javascripts/iris.min.js"></script>
<input type="text" id='color-picker' value="#bada55" />
<br />
<div style="position: relative" id="#test">zzz</div>