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

您可以通过检查是否单击颜色选择器内部或外部来执行此操作：

＆＃13;

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');
  });
});

＆＃13;

<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>

＆＃13;

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>

当虹膜没有聚焦时，使虹膜的颜色选择器消失

2 个答案: