仅在文本框中输入文本时显示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(); 
    } 
});

任何帮助将高度赞赏。

来源

2012-07-27 Rahul Desai

添加keyup听众 -

$(function() { 
    $("#search").on("keyup", function() { 
     if ($('#search').val().length != 0){ 
      $('#search').clearable(); 
      $('.divclearable').show(); 
     } 
     else{ 
      $('.divclearable').hide(); 
     } 
    }); 
});

来源

2012-07-27 16:26:18

不理解倒票。这是正确的答案。 – Archer 2012-07-27 16:30:33

@Archer我也不明白，从downvoter的解释将是伟大的。但是，有时会发生:) – 2012-07-27 16:35:30

我认为这是一个屁股受伤的家伙，删除了他的答案，因为它被指出是错误的。 – Archer 2012-07-27 16:36:53

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

来源

2012-07-27 16:30:38

为什么'$（'。divclearable'）。change'？你不是指'$（'。＃search'）。change'，类似于5分钟前的答案吗？ – Archer 2012-07-27 16:33:05

@Archer因为插件页面上的CSS列出了作为类名的类名，这会使该函数适用于所有的可清除控件。我也考虑到诸如剪切等事件而不使用关键事件来清除盒子的事件。 – 2012-07-27 16:38:16

但包装的div上不会发生更改事件 - 它发生在输入**编辑**：是的 - 你也发现它并修复它:) – Archer 2012-07-27 16:43:05

我不知道如果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(); 
    } 
};

来源

2012-07-27 16:32:55

我将与你谈论逻辑，你应该做自己的实现：有一个CSS名为“clearlink”的类显示关闭按钮。修改它并将初始值设置为：display：none，然后在您检测到长度变化时，在您的Jquery代码中为其提供方法更改显示：无法阻止。或者将clearlink的副本作为clearlink1并更改元素的类名称。

只需在浏览器中使用检查元素功能即可。

来源

2012-07-27 16:34:05

仅在文本框中输入文本时显示X按钮

回答

相关问题