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

Question

我有一个带有内联十字图标的输入框。该图标的作用是在单击时清除输入框。这是它的样子：

现在，如图所示，当输入框中没有文本时显示此图标没有任何意义。理想情况下，正确的做法是将其隐藏起来，只有在用户开始在框中输入内容时才显示它。我如何捕捉那个特定事件（用户开始输入）？我知道 oninput() 但问题是，每次键入任何内容时它都会触发。因此，如果您键入 "wiki,"，它将触发 4 次！我需要在您键入第一个字母时只触发一次的东西。有可能吗？

我能想到的另一种选择是让一个函数监视输入框的值并在它不再为空时启动。像这样：

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

但在这种情况下，如何确保函数确实触发，即它始终在寻找输入框值的变化？将上面的代码片段放在匿名函数中并保留它是否有帮助？

Answer 1

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

Answer 2

你可以这样做。

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

Answer 3

你不应该只触发它一次，否则如果用户删除了输入文本的内容，你仍然会显示该按钮。相反，您可以这样做：

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

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

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

How to catch an event when the user starts typing?

html

javascript

jquery

jquery-events