делает выбор цвета исчезнет Айрис, когда это не в фокусе

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>

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>