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

show X button only when text is entered in the textbox

本文关键字：文本 显示 按钮 输入      更新时间：2024-04-09

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

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

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

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

只需使用浏览器中的"检查图元"功能。

相关文章：