"검색"HTML5 입력이 지워지는 것을 어떻게 감지합니까?

154

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

javascript  jquery  html  events  dom-events 
— 제이슨
소스
HTML 5에 대해 잘 모르지만 onchange이벤트가 없습니까?
— Pekka
1
글쎄, 당신은 검색 상자가 그런 식으로 지워 졌는지 알아낼 수는 있지만 버튼을 클릭하여 선택과 삭제로 인해 검색 상자가 발생했는지 여부는 알 수 없습니다.
— mVChr
— Naftali 일명 Neal
가능한 답변 stackoverflow.com/a/59389615/11973798 도움이되는지 확인
— Shubham Khare
당신은 이벤트의 keyup 추가하고 검색해야 ..
— 부락 Öztürk에게

답변:

104

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

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

참고 문헌 :

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

— 파우 안
소스
2
감사 search합니다. 'x'를 클릭 할 때가 아닌 다른 이벤트가 발생한 시기를 파악할 수 없습니다 . 에 발사하지 않는 것 keyup, blur또는 형성하는 경우는 제출에 있습니다. 그러나 이것은 답변으로 표시되어야합니다.
— Maksim Vi.
4
search사용자가 누를 때 이벤트가 발생한다 Enter. 검색 창에 incremental속성 이있는 경우 사용자가 1 초 동안 입력을 중지하면 실행됩니다.
— Pauan
6
참고 :이 의견을 쓰는 시점에서 이것은 Chrome에서만 작동합니다.
— Jason
4
IE11은 input이벤트를 트리거 하지만 이벤트는 트리거 하지 않습니다 search.
— Joseph Lennox
1
"검색"이벤트는 비표준입니다. 참조 이 . 폴리 필없이 사용하지 않는 것이 좋습니다.
— rstackhouse
59

바인드 search-아래 주어진 주어진 검색 창-

$('input[type=search]').on('search', function () {
    // search logic here
    // this function will be executed on click of X (clear button)
});
— 샤 라드 비라 다르
소스
1
이 알 수없는 것들에 대한 정답
— 에릭 Grosskurth
6
Chrome에서는 검색 이벤트가 지원되지만 IE 또는 FF에서는 지원되지 않으며 MDN에 따르면 비표준 기능이며 표준 트랙이 아니라는 검색 이벤트가 있습니다. developer.mozilla.org/en-US/docs/Web/Events/search
— Rich Finelli
50

나는 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"포함).

— 로렌조 데 마테
소스
1
감사합니다 Lorenzo ... 이것은 매우 도움이되었습니다.
— Sterling Bourne
2
굉장하고 간단합니다. 많은 감사는 이것을 알아 내려고 노력하는 시간을 절약했습니다.
— user2029541 2016 년
Firefox가 이후로 동작을 변경 한 것 같습니다. Firefox 42.0으로 테스트했으며 changeChrome과 마찬가지로 이벤트를 처리하여 Enter 또는 포커스 손실에서만 발생합니다.
— Suzana
나는 입력 옵션을 좋아한다 ... 좋아!
— Cam Tullos
14

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>
— 구텐베르크
소스
5
저에게는 기본적으로 change이벤트가 시작되지 않습니다 blur. (x)Chrome의 검색 필드 내부를 클릭 해도 이벤트가 발생하지 않는 것 같습니다. 추가 조사 (및 아래의 의견을 읽은 후 ) 나는 click나를 위해 일해야했습니다. 그래서 $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });내 말에 작동
— Jannis
2
그러나 $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });사용자가 입력 필드를 클릭하면 트리거됩니다.
— Scott
8

나는 이것이 오래된 질문이라는 것을 알고 있지만 비슷한 것을 찾고있었습니다. 검색 창을 지우려면 '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);
});
— lostInTheTetons
소스
5

X를 클릭하면 변경 이벤트로 계산되어야한다는 것이 이해가되었습니다. 이미 onChange 이벤트를 수행하여 필요한 작업을 수행했습니다. 그래서 나를 위해 수정은 단순히이 jQuery 라인을 수행하는 것이 었습니다.

$('#search').click(function(){ $(this).change(); });

— 코리 갈리 아르디
소스
맑은 버튼을 누를 때 트리거이 원하는 경우에는, 입력 값에 대한 검사를 추가 할 수 있습니다 아래 Jannis '의견 ALA : stackoverflow.com/questions/2977023/... if (this.value === "") { ... }
— 샘
4

브라우저에서 액세스 할 수없는 것 같습니다. 검색 입력은 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
  }
});
— mVChr
소스
글쎄, 그건 짜증나. 어쩌면 나는 계획 B와 함께 갈 것입니다. 입력이 이제 비어 있다면 onClick 이벤트가 실행되었습니다 ... 아마 25ms 타이머에 넣을 수 있습니다.
— Jason
@Jason 네, X가있는 영역에서 클릭이 발생한 경우에만 위의 코드를 사용하여 실행할 수 있습니다. 당신이 말한 것처럼 입력이 비어 있는지 확인하는 것 외에도 충분합니다
— mVChr
1

이 게시물을 발견하고 나는 조금 오래된의 실현,하지만 난 생각 나는 대답을해야 할 수도 있습니다. 이것은 십자가 클릭을 처리하고, ESC 키를 뒤로 밀고, 누르십시오. 아마 더 잘 작성 될 수 있다고 확신합니다. 나는 여전히 자바 스크립트에 익숙하지 않습니다. jQuery (v1.6.4)를 사용하고 있습니다.

var searchVal = ""; //create a global var to capture the value in the search box, for comparison later
$(document).ready(function() {
  $("input[type=search]").keyup(function(e) {
    if (e.which == 27) {  // catch ESC key and clear input
      $(this).val('');
    }
    if (($(this).val() === "" && searchVal != "") || e.which == 27) {
      // do something
      searchVal = "";
    }
    searchVal = $(this).val();
  });
  $("input[type=search]").click(function() {
    if ($(this).val() != filterVal) {
      // do something
      searchVal = "";
    }
  });
});
— ScottG
소스
filterVal이 정의되지 않은 것 같습니다
— dlsso
1

이것을 시도하십시오, 당신을 도울 희망

$("input[name=search-mini]").on("search", function() {
  //do something for search
});
— 돈 자누 라노
소스
1

나는 이것이 x를 클릭 할 때만 발생하는 유일한 대답이라고 생각합니다.

그러나 그것은 약간 해키이며 ggutenberg의 대답은 대부분의 사람들에게 효과적입니다.

$('#search-field').on('click', function(){
  $('#search-field').on('search', function(){
    if(!this.value){
      console.log("clicked x");
      // Put code you want to run on clear here
    }
  });
  setTimeout(function() {
    $('#search-field').off('search');
  }, 1);
});

'#search-field'입력을위한 jQuery 선택기는 어디에 있습니까 ? 'input[type=search]'모든 검색 입력을 선택하는 데 사용하십시오 . 필드를 클릭 한 직후 검색 이벤트 (Pauan의 답변)를 확인하여 작동합니다.

— dlsso
소스
1

전체 솔루션은 여기

검색 x를 클릭하면 검색이 지워집니다. 또는 사용자가 Enter 키를 누르면 검색 API 히트를 호출합니다. 이 코드는 추가 esc 키업 이벤트 매처를 사용하여 추가로 확장 할 수 있습니다. 그러나 이것은 모든 것을해야합니다.

document.getElementById("userSearch").addEventListener("search", 
function(event){
  if(event.type === "search"){
    if(event.currentTarget.value !== ""){
      hitSearchAjax(event.currentTarget.value);
    }else {
      clearSearchData();  
    }
  }
});

건배.

— 타란 딥 싱
소스
1

js의 이벤트 루프를 기반으로 on on click버튼은 inputsearch on event를 트리거 하므로 아래 코드는 예상대로 작동합니다.

input.onclick = function(e){
  this._cleared = true
  setTimeout(()=>{
    this._cleared = false
  })
}
input.onsearch = function(e){
  if(this._cleared) {
    console.log('clear button clicked!')
  }
}

위의 코드는, 온 클릭 이벤트는 예약 this._cleared = false이벤트 루프를하지만 이벤트는 것입니다 항상 후 실행onsearch 당신이 안정적으로 확인할 수 있도록 이벤트 this._cleared사용자가 방금 클릭 여부를 결정하기 위해 상태를 X트리거 된 후 버튼 onsearch이벤트를.

이것은 거의 모든 조건 , 텍스트 붙여 넣기 , 증분 속성, ENTER / ESC 키 누름 등에서 작동 할 수 있습니다 .

— 제임스 양
소스
1

이를 달성하는 한 가지 방법이 있습니다. HTML에 증분 속성을 추가해야합니다. 그렇지 않으면 작동하지 않습니다.

window.onload = function() {
  var tf = document.getElementById('textField');
  var button = document.getElementById('b');
  button.disabled = true;
  var onKeyChange = function textChange() {
    button.disabled = (tf.value === "") ? true : false;
  }
  tf.addEventListener('keyup', onKeyChange);
  tf.addEventListener('search', onKeyChange);

}
<input id="textField" type="search" placeholder="search" incremental="incremental">
<button id="b">Go!</button>
스 니펫 확장

— Revanth
소스
1 
document.querySelectorAll('input[type=search]').forEach(function (input) {
   input.addEventListener('mouseup', function (e) {
                if (input.value.length > 0) {
                    setTimeout(function () {
                        if (input.value.length === 0) {
                            //do reset action here
                        }
                    }, 5);
                }
            });
}

ECMASCRIPT 2016

— realmag777
소스
0

검색 또는 클릭이 작동하지만 ... 구식 브라우저에서 발견 된 문제-검색이 실패합니다. 많은 플러그인 (jquery ui 자동 완성 또는 fancytree 필터)에는 흐림 및 초점 처리기가 있습니다. 이것을 자동 완성 입력 상자에 추가하면 나에게 효과적이었습니다 (평가가 빠르기 때문에 this.value == ""사용). 작은 'x'를 누르면 흐림 효과가 커서를 상자에 유지합니다.

PropertyChange 및 입력은 IE 10 및 IE 8뿐만 아니라 다른 브라우저에서도 작동했습니다.

$("#INPUTID").on("propertychange input", function(e) { 
    if (this.value == "") $(this).blur().focus(); 
});

FancyTree 필터 확장의 경우 재설정 버튼을 사용하여 다음과 같이 클릭 이벤트를 강제로 적용 할 수 있습니다.

var TheFancyTree = $("#FancyTreeID").fancytree("getTree");

$("input[name=FT_FilterINPUT]").on("propertychange input", function (e) {
    var n,
    leavesOnly = false,
    match = $(this).val();
    // check for the escape key or empty filter
    if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === "") {
        $("button#btnResetSearch").click();
        return;
    }

    n = SiteNavTree.filterNodes(function (node) {
        return MatchContainsAll(CleanDiacriticsString(node.title.toLowerCase()), match);
        }, leavesOnly);

    $("button#btnResetSearch").attr("disabled", false);
    $("span#SiteNavMatches").text("(" + n + " matches)");
}).focus();

// handle the reset and check for empty filter field... 
// set the value to trigger the change
$("button#btnResetSearch").click(function (e) {
    if ($("input[name=FT_FilterINPUT]").val() != "")
        $("input[name=FT_FilterINPUT]").val("");
    $("span#SiteNavMatches").text("");
    SiteNavTree.clearFilter();
}).attr("disabled", true);

대부분의 용도에 맞게 조정할 수 있어야합니다.

— 리차드 듀포
소스
-2

TextField 크로스 버튼 (X)을 클릭하면 onmousemove ()가 실행되면이 이벤트를 사용하여 모든 함수를 호출 할 수 있습니다.

<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>
— priyaranjan sahoo
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.