我正在尝试编写一些代码，如果输入为空，输入颜色将变为红色。用户输入内容后，红色将被移除。
HTML
<html>
<head>
<!-- add main style -->
<link rel="stylesheet" href="../css/style.css">
<!-- add JQuery -->
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
</head>
<body>
<div class="financeContainer">
<div class="searchBox">
<input id="financeSearch" type="text" class="financeInput" placeholder="Enter The Code">
<button id="financeBtn" class="financeSearchBt"><i class="fas fa-search financeSearchIcon"></i></button>
</div>
</div>
<script>
</script>
</body>
</html>
CSS
.redColor{
color: red;
}
jQuery
$(document).ready(function () {
$("#financeSearch").keydown(function () {
if ($("#financeSearch").val().length>0){
$("#financeSearch").removeClass("redColor")
}
});
$(document).bind('keypress', function(e) {
if(e.keyCode==13){
$('#financeBtn').trigger('click');
}
});
$("#financeBtn").click(function () {
var financeKey = $("#financeSearch").val();
if (financeKey == ""){
$("#financeSearch").addClass("redColor")
}
});
当按钮被提交时，输入得到类 redColor。我希望如果用户输入红色会被移除。但在输入 2 个字符后，它就完成了。我希望在输入第一个字符后完成。
最佳答案
当调用 keydown 时，最后输入的字符尚未添加到输入值中。所以这就是为什么你需要输入两个字符来去除红色。
你应该使用 keyup 而不是 keydown
您不需要在事件处理程序中选择 $("#financeSearch")，只需使用 $(this)。
并且也不需要比较大于0的length。您可以直接输入 $(this).val().length 因为数字中除 0 之外的所有值都是真实的。
$(document).ready(function() {
$("#financeSearch").keyup(function() {
if ($(this).val().length) {
$(this).removeClass("redColor")
}
});
$(document).bind('keypress', function(e) {
if (e.keyCode == 13) {
$('#financeBtn').trigger('click');
}
});
$("#financeBtn").click(function() {
var financeKey = $("#financeSearch").val();
if (financeKey == "") {
$("#financeSearch").addClass("redColor")
}
});
});.redColor {
color: red;
}<!-- add JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div class="financeContainer">
<div class="searchBox">
<input id="financeSearch" type="text" class="financeInput" placeholder="Enter The Code">
<button id="financeBtn" class="financeSearchBt"><i class="fas fa-search financeSearchIcon"></i></button>
</div>
</div>关于javascript - 输入长度大于 0 不能正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55946888/