포커스

Question

하지 않을 때 홍채의 색상 선택기 dissappear을

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