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

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

现在，当输入框中没有如图所示的文本时，让这个图标可见没有任何意义。理想情况下，正确的做法是将其隐藏起来，并仅在用户开始在框内键入内容时显示。如何捕捉（用户开始键入的）特定事件？我知道

oninput（）

，但问题是，每次键入任何内容时，它都会触发。所以如果你输入，比如说“wiki”，它会触发4次！我需要一种在你输入第一个字母时只会触发一次的东西。有可能吗

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

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

---

但在这种情况下，我如何确保函数触发，即它始终关注输入框值的变化？将上面的代码片段放在匿名函数中并保持不变会有帮助吗？

您可以这样做

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

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

---

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

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

默认情况下隐藏图标

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

---

为什么你要它只在第一个字母上发射一次？有什么原因吗？只要检查一下输入的长度，这会不会在每一个字母被输入后触发？我只需要在用户“开始”键入时触发该功能。如果您想在用户键入时显示该图标，那么当用户将焦点放在该框图标上时，会显示“焦点”和“焦点输出”。焦点与键入不同。在用户真正开始输入之前，我不需要图标。如果用户删除了输入内容，则不应再显示按钮。所以只发射一次并不是最好的解决方案。@felipe-t删除按钮也会触发此事件。您可以检查内容的长度。

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