HTML5에서 search
입력 유형은 오른쪽에 작은 X가 표시되어 텍스트 상자를 지우 게합니다 (적어도 Chrome에서는 가능할 수 있음). 자바 스크립트 나 jQuery에서이 X가 클릭 될 때를 감지하는 방법이 있습니까? 예를 들어, 상자가 완전히 클릭되는 시점을 감지하거나 일종의 위치 클릭 감지 (x-position / y-position)를 수행하는 것입니까?
답변
실제로 사용자가 검색하거나 사용자가 “x”를 클릭 할 때 발생하는 “검색”이벤트가 있습니다. 이것은 “증분”속성을 이해하기 때문에 특히 유용합니다.
“onclick”해킹을 사용하지 않는 한 “x”클릭과 검색의 차이점을 알 수 있는지 확실하지 않습니다. 어느 쪽이든, 희망적으로 이것은 도움이됩니다.
참고 문헌 :
답변
바인드 search
-아래 주어진 주어진 검색 창-
$('input[type=search]').on('search', function () {
// search logic here
// this function will be executed on click of X (clear button)
});
답변
나는 change
, keyup
그리고 search
오늘 고투했기 때문에 “늦은”답을 추가하고 싶습니다. 어쩌면 내가 찾은 것이 다른 사람들에게도 유용 할 수 있습니다. 기본적으로 검색 유형 패널이 있으며 작은 X (Chrome 및 Opera에서 FF가 구현하지 않음)를 누를 때 올바르게 반응하고 결과 창을 지우고 싶었습니다.
나는이 코드를 가지고 있었다 :
$(some-input).keyup(function() {
// update panel
}
$(some-input).change(function() {
// update panel
}
$(some-input).on("search", function() {
// update panel
}
(각각의 상황과 상황을 확인하고 싶었 기 때문에 별도입니다).
Chrome과 Firefox가 다르게 반응하는 것으로 나타났습니다. 특히 Firefox는 change
“입력의 모든 변경”으로 취급하지만 Chrome은 “초점을 잃고 내용이 변경 될 때”로 취급합니다. 따라서 Chrome에서 “업데이트 패널”기능이 한 번만 호출되었습니다. FF는 모든 키를 누를 때마다 두 번 (1 개 keyup
, 1 개 change
)
또한 작은 X (FF에없는)로 필드를 지우면 search
Chrome 에서 이벤트가 발생했습니다 ( no keyup
, no) change
.
결론? input
대신 사용하십시오 :
$(some-input).on("input", function() {
// update panel
}
테스트 한 모든 브라우저에서 동일한 동작으로 입력 내용의 모든 변경 사항에 반응합니다 (마우스로 복사하여 붙여 넣기, 자동 완성 및 “X”포함).
답변
Pauan의 응답을 사용하면 대부분 가능합니다. 전의.
<head>
<script type="text/javascript">
function OnSearch(input) {
if(input.value == "") {
alert("You either clicked the X or you searched for nothing.");
}
else {
alert("You searched for " + input.value);
}
}
</script>
</head>
<body>
Please specify the text you want to find and press ENTER!
<input type="search" name="search" onsearch="OnSearch(this)"/>
</body>
답변
나는 이것이 오래된 질문이라는 것을 알고 있지만 비슷한 것을 찾고있었습니다. 검색 창을 지우려면 ‘X’를 클릭 한시기를 결정하십시오. 여기에 대한 답변은 전혀 도움이되지 않았습니다. 하나는 닫았지만 사용자가 ‘enter’버튼을 눌렀을 때 영향을 받았으며 ‘X’를 클릭하는 것과 동일한 결과를 나타냅니다.
나는 다른 게시물 에서이 답변을 발견했으며 그것은 나에게 완벽하게 작동하며 사용자가 검색 상자를 지울 때만 발생합니다.
$("input").bind("mouseup", function(e){
var $input = $(this),
oldValue = $input.val();
if (oldValue == "") return;
// When this event is fired after clicking on the clear button
// the value is not cleared yet. We have to wait for it.
setTimeout(function(){
var newValue = $input.val();
if (newValue == ""){
// capture the clear
$input.trigger("cleared");
}
}, 1);
});
답변
X를 클릭하면 변경 이벤트로 계산되어야한다는 것이 이해가되었습니다. 이미 onChange 이벤트를 수행하여 필요한 작업을 수행했습니다. 그래서 나를 위해 수정은 단순히이 jQuery 라인을 수행하는 것이 었습니다.
$('#search').click(function(){ $(this).change(); });
답변
브라우저에서 액세스 할 수없는 것 같습니다. 검색 입력은 Cocoa NSSearchField의 웹킷 HTML 랩퍼입니다. 취소 단추는 랩퍼에서 사용 가능한 외부 참조가없는 브라우저 클라이언트 코드에 포함 된 것 같습니다.
출처 :
- http://weblogs.mozillazine.org/hyatt/archives/2004_07.html#005890
- http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#text-state-and-search-state
- http://dev.w3.org/html5/markup/input.search.html#input.search
클릭시 마우스 위치를 통해 알아 내야하는 것처럼 보입니다.
$('input[type=search]').bind('click', function(e) {
var $earch = $(this);
var offset = $earch.offset();
if (e.pageX > offset.left + $earch.width() - 16) { // X button 16px wide?
// your code here
}
});