[html] “검색”HTML5 입력이 지워지는 것을 어떻게 감지합니까?

Html / 글쓴이

HTML5에서 search입력 유형은 오른쪽에 작은 X가 표시되어 텍스트 상자를 지우 게합니다 (적어도 Chrome에서는 가능할 수 있음). 자바 스크립트 나 jQuery에서이 X가 클릭 될 때를 감지하는 방법이 있습니까? 예를 들어, 상자가 완전히 클릭되는 시점을 감지하거나 일종의 위치 클릭 감지 (x-position / y-position)를 수행하는 것입니까?

답변

실제로 사용자가 검색하거나 사용자가 “x”를 클릭 할 때 발생하는 “검색”이벤트가 있습니다. 이것은 “증분”속성을 이해하기 때문에 특히 유용합니다.

“onclick”해킹을 사용하지 않는 한 “x”클릭과 검색의 차이점을 알 수 있는지 확실하지 않습니다. 어느 쪽이든, 희망적으로 이것은 도움이됩니다.

참고 문헌 :

http://help.dottoro.com/ljdvxmhr.php

답변

바인드 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에없는)로 필드를 지우면 searchChrome 에서 이벤트가 발생했습니다 ( 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 랩퍼입니다. 취소 단추는 랩퍼에서 사용 가능한 외부 참조가없는 브라우저 클라이언트 코드에 포함 된 것 같습니다.

출처 :

클릭시 마우스 위치를 통해 알아 내야하는 것처럼 보입니다.

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