keydown 事件是如何工作的？答案

【问题标题】：How does the keydown event work?keydown 事件是如何工作的？
【发布时间】：2023-03-06 20:17:01
【问题描述】：

我希望如果我的输入文本值不为空，则显示我的.removetext div，但它不能正常工作。如果您在第二个字符后键入内容，我的 .removetext 将被隐藏，但如果我的输入不为空，请不要隐藏我的 .removetext 类。

我的错误在哪里？我想我不明白 keydown 事件

$(document).ready(function() {
  $('.search-hotels').on('input', function() {
    var val = $.trim(this.value);
    if (!val == "") {
      $(".removetext").show(val.length > 0, function() {
        var clear = $(this);
        clear.on('click', function() {
          alert('hey');
        })
      });
    } else {
      $(".removetext").hide();
    }
  });

});

.main {
  position: relative;
  width: 40%;
}

.search-hotels {
  width: 100%;
  padding: 15px;
  border: 3px solid #ccc;
}

.removetext {
  position: absolute;
  right: 0;
  top: 25%;
  font-size: 23px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <input type="text" class="search-hotels">
  <div class="removetext">&times;</div>
</div>

【问题讨论】：

只是出于好奇，$(el).show(function) 到底是如何工作的？我在jQuery.show 的文档中没有看到，我认为它使用的是.show(duration, complete) 模式，有人可以确认吗？
可能是一个测试 - 如果只有一个参数和参数是一个函数，则将其用作回调
如果您添加$(".removetext").show(val.length > 0, function() { var clear = $(this); clear.on('click', function() { alert('hey'); })，那么对于每次击键，您都会添加一个事件处理程序

标签： javascript jquery html css

【解决方案1】：

尝试输入 - 它也可以处理粘贴：

$(function() {
  $('.search-hotels').on('input', function() {
    var val = $.trim(this.value);
    $(".removetext").toggle(val.length>0); // test anything not blank
  });
  // the event handler needs to be HERE and not inside the inout handler
  $(".removetext").on('click', function() {
      alert('hey');
  });
});

.main {
  position: relative;
  width: 40%;
}

.search-hotels {
  width: 100%;
  padding: 15px;
  border: 3px solid #ccc;
}

.removetext {
  position: absolute;
  right: 0;
  top: 25%;
  font-size: 23px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <input type="text" class="search-hotels" value="">
  <div class="removetext">&times;</div>
</div>

如果你需要回调，你确实需要显示和隐藏

$(function() {
  $('.search-hotels').on('input', function() {
    var show = $.trim(this.value).length>0;
    if (show) {
      $(".removetext").show("slow",function() {
        console.log("showing");
      });
    }
    else {
      $(".removetext").hide("slow",function() {
        console.log("hiding");
      });
    }
        
  });
});

.main {
  position: relative;
  width: 40%;
}

.search-hotels {
  width: 100%;
  padding: 15px;
  border: 3px solid #ccc;
}

.removetext {
  position: absolute;
  right: 0;
  top: 25%;
  font-size: 23px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <input type="text" class="search-hotels" value="">
  <div class="removetext">&times;</div>
</div>

【讨论】：

这是我第一次看到切换功能中的 if 语句，非常感谢！
另一个问题 toggle 有回调吗？例如 .toggle(val.length>0,function(){//callback})
没有。如果需要回调，则需要显示和隐藏
是的，我需要在显示我的.removetext 后添加点击事件以清除输入，这不起作用：$(".removetext").show(val.length>0,function( ){ alert('showed'); });
请看我的更新。绝对不需要在回调中分配点击处理程序。只需在页面就绪事件中使用它！

【解决方案2】：

您可以通过使用keyup 而不是keydown 并将if 语句更改为以下内容来实现您想要的：

if ($(this).val());

使用keydown 意味着它不会使用输入的.val，但会在更新输入之前检查.val，因为.val 将在@ 之后更新 987654330@事件。

更好的方法是使用input event，如下所示：

$(document).ready(function() {
  $('.search-hotels').on('input', function() {
    if ($(this).val()) {
      $(".removetext").show(function() {
        console.log($(this).attr('class'));
      });
    } else {
      $(".removetext").hide();
    }
  })
});

.main {
  position: relative;
  width: 40%;
}

.search-hotels {
  width: 100%;
  padding: 15px;
  border: 3px solid #ccc;
}

.removetext {
  position: absolute;
  right: 0;
  top: 25%;
  font-size: 23px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <input type="text" class="search-hotels">
  <div class="removetext">&times;</div>
</div>

【讨论】：

这是因为在按键的那一刻无法注册输入吗？
是的，我同意输入更好；）

【解决方案3】：

Keydown 事件在输入字符之前触发，因此您应该使用在输入字符后触发的 keyup 事件。

另外，!$(this).val() 与 $(this).val()=="" 不同

使用if($(this).val()=="")

【讨论】：

【解决方案4】：

你应该使用keyup。 Key down 注册按下的键，但尚未填充输入。您可以通过 keydown 事件属性并使用属性“key”（如果我没记错的话）来获取在 keydown 期间输入的值，但是如果您想获取输入中的文本，则需要“keyup”

【讨论】：

【解决方案5】：

你可以在这里更好地使用keyup，检查$(this).val().length会更好。

$(document).ready(function() {
  $('.search-hotels').on('keyup', function() {
    if ($(this).val().length > 0) {
      $(".removetext").show(function() {
        console.log($(this).attr('class'));
      });
    } else {
      $(".removetext").hide();
    }
  })
});

.main {
  position: relative;
  width: 40%;
}

.search-hotels {
  width: 100%;
  padding: 15px;
  border: 3px solid #ccc;
}

.removetext {
  position: absolute;
  right: 0;
  top: 25%;
  font-size: 23px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <input type="text" class="search-hotels">
  <div class="removetext">&times;</div>
</div>

【讨论】：

【解决方案6】：

它应该是if ($(this).val())，否则你检查它是否为空。另外，使用keyup 因为keydown 正在捕获您的val()，然后它才真正具有价值。

$(document).ready(function() {
  $('.search-hotels').on('keyup', function() {
    if ($(this).val()) {
      $(".removetext").show(function() {
        console.log($(this).attr('class'));
      });
    } else {
      $(".removetext").hide();
    }
  })
});

.main {
  position: relative;
  width: 40%;
}

.search-hotels {
  width: 100%;
  padding: 15px;
  border: 3px solid #ccc;
}

.removetext {
  position: absolute;
  right: 0;
  top: 25%;
  font-size: 23px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <input type="text" class="search-hotels">
  <div class="removetext">&times;</div>
</div>

【讨论】：

【解决方案7】：

按下按钮时触发keydown事件，此时您的值未更新，请尝试在释放按钮并更新输入值时触发keyup事件...

$(document).ready(function() {
  $('.search-hotels').on('keyup', function() {
    console.log(this,$(this).val());
    if ($(this).val()) {
      $(".removetext").show(function() {
        console.log($(this).attr('class'));
      });
    } else {
      $(".removetext").hide();
    }
  })
});

.main {
  position: relative;
  width: 40%;
}

.search-hotels {
  width: 100%;
  padding: 15px;
  border: 3px solid #ccc;
}

.removetext {
  position: absolute;
  right: 0;
  top: 25%;
  font-size: 23px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <input type="text" class="search-hotels">
  <div class="removetext">&times;</div>
</div>

【讨论】：

【解决方案8】：

您不应使用 keydown 事件，因为它是写入输入 value 的内容“后面”的一个按键。

理想情况下，您应该使用oninput（甚至不是每个人都建议的keyup，而是更快的@mplungjan :)。 oninput 还允许您正确跟踪复制/过去的事件，这与 onkeyup 不同。

此外，只需通过 this.value 读取输入值，但记得修剪它以去除空格。

$(document).ready(function() {
  $('.search-hotels').on('input', function() {
    if (this.value.trim()) {
      $(".removetext").show();
    } else {
      $(".removetext").hide();
    }
  })
});

.main {
  position: relative;
  width: 40%;
}

.search-hotels {
  width: 100%;
  padding: 15px;
  border: 3px solid #ccc;
}

.removetext {
  position: absolute;
  right: 0;
  top: 25%;
  font-size: 23px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main">
  <input type="text" class="search-hotels">
  <div class="removetext">&times;</div>
</div>

【讨论】：