javascript - making iris's color selector dissappear when it's not in focus -

javascript - making iris's color selector dissappear when it's not in focus -

my html:

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

my javascript:

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

my jsfiddle: http://jsfiddle.net/vdmw1knl/3/

without blur / focus stuff if click on text input color picker appear , never go away. blur / focus stuff if click on color picker it'll appear it'll go away if select color.

i want color picker go away if either text input it's attached or html composing go out of focus. clicking on color within color picker ought not create go away. unfortunately, don't know how create this. ideas?

you can checking whether clicked within or outside color picker this:

class="snippet-code-js lang-js prettyprint-override">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'); }); }); class="snippet-code-html lang-html prettyprint-override"><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>

javascript jquery html css