如何在用戶開始輸入時捕獲事件？

Question

我有一個帶有內嵌十字圖標的輸入框。 該圖標的作用是在單擊時清除輸入框。 這就是它的樣子：

現在，當圖片中顯示的輸入框中沒有文字時，可以看到此圖標沒有任何意義。 理想情況下，正確的做法是將其隱藏起來並僅在用戶開始在框內輸入內容時顯示。 如何捕獲特定事件（用戶開始輸入）？ 我知道oninput()但問題是，每次鍵入任何內容時都會觸發。 所以，如果你打字，比方說，“維基”，它會發射4次！ 當你輸入第一個字母時，我需要只觸發一次的東西。 它甚至可能嗎？

我能想到的另一種選擇是讓函數觀察輸入框的值，並在它不再為空的時刻啟動它。 像這樣的東西：

var check = document.getElementById('word').value;
if(check != ""){
  // show "delete" icon
}

但在這種情況下，我如何確保函數確實觸發，即它總是在尋找輸入框值的變化？ 將上面的代碼段放在一個匿名函數中並將其留在那里會有幫助嗎？

Answer 1

你可以這樣做。

$("#textbox").keyup(function(){
    if($(this).val().length>0){
        $("#clearicon").show();
    }
    else
    {
         $("#clearicon").hide();
    }
});

Answer 2

您不應該只觸發一次，否則如果用戶刪除輸入文本的內容，您仍然會顯示該按鈕。 相反，你可以這樣做：

document.getElementById('itext').addEventListener('input', function(e) {
  if (e.target.value !== '') {
    console.log('show button');
  }
  else {
    console.log('hide button');
  }
});

Answer 3

$("#textbox").keydown(function(e){
   //  show "delete" icon
});

Answer 4

You can use keydown event and check value of input every time whether it is empty or not if its value is empty then hide the delete icon else show it.

$("#textbox").keydown(function(e){
   if($("textbox").val()==null || $("textbox").val()=="")
   {
     $("deleteIcon").hide();
   }
});

Answer 5

默認隱藏圖標

 $('#check').on('input', function() {
  if($(this).val() != '') {
    //Write show() function for icon selectors
  } else {
    // Write hide() function for icon selectors
  }
});