0

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

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

示例演示是 点击这里

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

 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>
4

2 回答 2

1

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

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

在你的代码中做这件事，在.after()那里为 span 提供类名..

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

});

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

于 2013-03-05T11:44:16.007 回答
0

用这个更新你的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();
                                }
                    });



                });
于 2013-03-05T11:45:30.693 回答