如何在用户开始输入时捕获事件？

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
  }
});