Question

我正在使用可用插件here通过单击X按钮删除文本框中的文本。如何修改代码，以便只有在文本框中输入文本时才会显示X按钮？我尝试在JavaScript代码中设置返回starement的条件：if ($('#search').val().length != 0)但是它可以正常工作。这是我试过的代码：

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

任何帮助都将受到高度赞赏。

Answer 1

添加keyup监听器 -

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

Answer 2

查看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();
    }
);

Answer 3

我不确定当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();
    }
};

Answer 4

我将与您讨论逻辑，您应该自己实施：有一个名为“clearlink”的css类，它显示关闭按钮。修改它并将初始值设置为：display：none，然后在您的Jquery代码中，当您检测到长度更改时，请使用方法更改display：none to block。或者将clearlink的副本复制为clearlink1并更改元素的类名。

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

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

4 个答案: