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

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

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

今日更新小提琴3月7日( 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();
                                }
                    });



                });

Answer 2

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

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

在你的代码中，在.after()中给出跨度的类名..

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

});

然后使用此类来隐藏或显示none。