当用户开始输入时如何捕捉事件？答案

【问题标题】：How to catch an event when the user starts typing?当用户开始输入时如何捕捉事件？
【发布时间】：2015-12-29 03:52:16
【问题描述】：

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

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

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

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

但是在这种情况下，我如何确保函数确实触发，即它始终在寻找输入框值的变化？将上面的 sn-p 放在匿名函数中并保留它会有所帮助吗？

【问题讨论】：

为什么你希望它只在第一个字母上触发一次？有什么原因吗？
只检查输入的长度

标签： javascript html jquery jquery-events

【解决方案1】：

你可以这样做。

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

【讨论】：

【解决方案2】：

默认隐藏图标

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

再一次，这不会在输入每个字母后触发吗？我需要该功能仅在用户“开始”输入时触发。
如果您想在用户输入“focus”和“focusout”时显示该图标，那么当用户关注该框图标时会显示该图标。
焦点和打字不一样。在用户真正开始输入之前，我不需要图标。
如果用户删除了输入的内容，你不应该再显示按钮。所以只触发一次并不是最好的解决方案。
@felipe-t 删除按钮也触发了这个事件。您可以检查内容的长度。

【解决方案5】：

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

【讨论】：