keydown事件如何工作？
我希望如果我的输入文本值不是空的，然后显示我的.removetext股利但它不能正常工作。如果您在第二个字符之后键入某个字词，我的.removetext正在隐藏，但如果我的输入不为空，请不要隐藏我的.removetext类。keydown事件如何工作？
我的错误在哪里？我想我不明白的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">×</div>
</div>
尝试输入 - 它处理过贴：
$(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">×</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">×</div>
</div>这是我第一次看到如果语句切换功能感谢你真是太棒了！ –
另一个问题确实有回拨？例如.toggle（val.length> 0，function（）{// callback}） –
不需要。如果你需要回调，你需要显示和隐藏 – mplungjan
你可以达到你想要的使用keyup代替和改变你的if声明如下：
if ($(this).val());
使用表示它不会使用输入的.val，但会检查.val之前输入更新，因为.val将更新后keyup事件。
一个更好的办法是使用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">×</div>
</div>
您应该使用KEYUP。按键注册按键，但尚未填入输入。您可以通过keydown事件属性并使用属性“key”（如果我没记错的话）来获取在keydown期间输入的值，但是如果要抓取输入中的文本，则需要“keyup”
问题已解决，谢谢@carinlynchin –
Keydown事件在键入字符之前触发，因此您应该使用在输入字符后触发的键入事件。
此外，!$(this).val()比$(this).val()==""
不同使用if($(this).val()=="")
感谢ninad我不知道键控功能感谢 –
你可以在这里更好地使用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">×</div>
</div>
应该if ($(this).val())否则你的检查，如果它是空的。 另外，使用keyup作为捕捉您的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">×</div>
</div>
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">×</div>
</div>
你不应该使用keydown事件，因为它是一个按键的什么写入输入value“后面” 。
理想情况下，你应该使用oninput（甚至不是每个人都建议的关键帧，而是@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">×</div>
</div>
只是出于好奇，到底怎么做'$（EL）.show（功能）'工作？我没有在[jQuery.show]（http://api.jquery.com/show/）的文档中看到，我假设它使用'.show（duration，complete）'模式，任何人都可以确认吗？ – James
可能的测试 - 如果只有一个参数和参数是函数，则将其用作回调 – mplungjan
如果添加'$（“。removetext”）。show（val.length> 0，function（）{ var clear = $（这个）; clear.on（'click'，function（）{ alert（'hey'）; }）那么对于每个按键，你添加一个事件处理程序 – mplungjan