仅在文本框中输入文本时显示X按钮
问题描述:
我正在使用插件here通过单击X按钮删除文本框中的文本。如何修改代码,以便仅在文本框中输入文本时才显示X按钮? 我尝试了在JavaScript代码中的返回starement的设置条件:if ($('#search').val().length != 0)
但它的工作。 这里是我试过的代码:仅在文本框中输入文本时显示X按钮
$(document).ready(function(){
if ($('#search').val().length != 0){
$('#search').clearable();
$('.divclearable').show();
}
else{
$('.divclearable').hide();
}
});
任何帮助将高度赞赏。
答
添加keyup
听众 -
$(function() {
$("#search").on("keyup", function() {
if ($('#search').val().length != 0){
$('#search').clearable();
$('.divclearable').show();
}
else{
$('.divclearable').hide();
}
});
});
答
望着CSS,看来该按钮是clearlink
类的一部分。
你会简单地做$("a.clearlink").hide()
来隐藏它。
比简单的按键其他这将处理事件:
$('.divclearable > input').change(
function()
{
if($(this).val().length == 0)
$(this).closest('a.clearlink').hide();
else
$(this).closest('a.clearlink').show();
}
);
答
我不知道如果jquery的变化事件触发,当一个元素的文本是由JavaScript的改变。
您可能希望将一个单击事件附加到清除按钮,因此除了清除文本之外,它还隐藏自身。我不知道这是否与您但是使用该库的事件处理程序发生冲突......
$("#search").change(check_input);
$('.divclearable').click(check_input);
check_input = function(){
if ($('#search').val().length != 0){
$('#search').clearable();
$('.divclearable').show();
}
else{
$('.divclearable').hide();
}
};
答
我将与你谈论逻辑,你应该做自己的实现: 有一个CSS名为“clearlink”的类显示关闭按钮。修改它并将初始值设置为:display:none,然后在您检测到长度变化时,在您的Jquery代码中为其提供方法更改显示:无法阻止。或者将clearlink的副本作为clearlink1并更改元素的类名称。
只需在浏览器中使用检查元素功能即可。
不理解倒票。这是正确的答案。 – Archer 2012-07-27 16:30:33
@Archer我也不明白,从downvoter的解释将是伟大的。但是,有时会发生:) – 2012-07-27 16:35:30
我认为这是一个屁股受伤的家伙,删除了他的答案,因为它被指出是错误的。 – Archer 2012-07-27 16:36:53