2

我正在使用此处提供的插件通过单击 X 按钮来删除文本框中的文本。如何修改代码以使 X 按钮仅在文本框中输入文本时显示？我尝试在 JavaScript 代码中设置返回值的条件：if ($('#search').val().length != 0)但它起作用了。这是我尝试过的代码：

$(document).ready(function(){
    if ($('#search').val().length != 0){
        $('#search').clearable();
        $('.divclearable').show();
    }
    else{
        $('.divclearable').hide();
    }
});

任何帮助将不胜感激。

4

4 回答 4

5

添加keyup监听器 -

$(function () {
    $("#search").on("keyup", function() {
        if ($('#search').val().length != 0){
            $('#search').clearable();
            $('.divclearable').show();
        }
        else{
            $('.divclearable').hide();
        }
    });
});
于 2012-07-27T16:26:18.553 回答
1

查看 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-27T16:30:38.517 回答
0

我不确定当元素的文本被 javascript 更改时是否会触发 jquery 更改事件。

您可能希望将单击事件附加到清除按钮，以便它在清除文本之外隐藏自身。我不确定这是否与您正在使用的库的事件处理程序冲突......

$("#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-27T16:32:55.633 回答
0

我会和你谈谈逻辑，你应该自己实现：有一个名为“clearlink”的css类，它显示关闭按钮。修改它并将初始值设置为：显示：无，然后在您的 Jquery 代码中，当您检测到长度更改时，为它提供方法更改显示：无以阻止。或将 clearlink 复制为 clearlink1 并更改元素的类名。

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

于 2012-07-27T16:34:05.670 回答