Question

如果文本框内的长度小于1，如何从文本框中隐藏清除图标。

我尝试了下面的代码，但它没有帮助我。如果输入字段的长度为1，则不会隐藏内部图标。

示例演示为click here

我尝试了以下代码来隐藏它。

 var myLength = $("#keywords").val().length; 
    if(myLength==0)
      {
        $("span").hide();// i tried to hide it but its not hiding
      }

我的完整代码在这里

<!DOCTYPE html>
        <html lang="en">
            <head>
                <title>SO question 2803532</title>
                <script src="http://code.jquery.com/jquery-latest.min.js"></script>
                <script>
                    $(document).ready(function() {
                        var myLength = $("#keywords").val().length; 
                        if(myLength==0)
                        {
                           $("span").hide();// i tried to hide it but its not hiding
                        } 
                        //show the innser clearable icon if users type  any alphabets
                        $("input").keyup(function()
                        {
                            var textbox = $("#keywords").val().length;
                        if(textbox>=1)
                               $("span").hide();// i tried to hide it but its not hiding
                        });


                        $('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
                            $(this).prev('input').val('').focus();
                        }));
                    });
                 </script>
                <style>
                    span.deleteicon {
                        position: relative;
                    }
                    span.deleteicon span {
                        position: absolute;
                        display: block;
                        top: 5px;
                        right: 0px;
                        width: 16px;
                        height: 16px;
                        background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                        cursor: pointer;
                    }
                    span.deleteicon input {
                        padding-right: 16px;
                    }
                </style>
            </head>
            <body>
                <input type="text" class="deletable"  id="keywords">
            </body>
        </html>

Answer 1

为什么不使用 deleteicon 类来隐藏，使用..

$('.deleteicon').hide();

在您的代码中执行该操作，在.after()为span span提供类名称。

 $('input.deletable').wrap('<span class="deleteicon" />').after($('<span class="deleteme"/>').click(function()(){

});

然后使用此类 deleteme 隐藏或显示无..

Answer 2

用这个更新你的js：这是小提琴 OLD updated one：http://jsfiddle.net/3VxEH/8/

今天更新了7月3日（IST）：http://jsfiddle.net/3VxEH/20/

 $(document).ready(function() {

 $('input.deletable').wrap('<span class="deleteicon" />').after($('<div style="display:none"/>').click(function() {
                        $(this).prev('input').val('').focus();
                    }));
                     //  $(".deleteicon").find("div").hide(); 

                  var myLength = $("#keywords").val().length; 
                //  alert(myLength);
  if (myLength > 0) {
      $(".deleteicon").find("div").show(); 
 }

                    //show the innser clearable icon if users type  any alphabets
                    $("input").bind('ready keyup',function()

                    {
                        var textbox = $("#keywords").val().length;
                    if(textbox>=1)
                    //alert(textbox);
                           $(".deleteicon").find("div").show();// i tried to hide it but its not hiding
                            else {
                                $(".deleteicon").find("div").hide();
                                }
                    });



                });

如果文本框为空，如何从文本框中隐藏图标图像

2 个答案: