使虹膜的颜色选择器在没有对焦时消失

Question

我的HTML：

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

我的抄本：

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>

​

Answer 2

​

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


  $(document).on('click', function(event) {
    var clicked = $(event.target),
      $iris = $('.iris-picker');

    if ($iris.hasClass('active') && !clicked.is('.iris-picker') && !clicked.is('#color-picker')) {
      $('#color-picker').iris('hide');
      $iris.removeClass('active');
    }
  });
});

<link href="https://raw.githubusercontent.com/Automattic/Iris/master/src/iris.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.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>

​