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()そこにスパンのクラス名を付けて、そのことを行います..

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

});

次に、このクラスのdeletemeを使用して、何も表示または非表示にします。

于 2013-03-05T11:44:16.007 に答える
0

これであなたのjsを更新してください：ここにフィドルがあり ます：http OLD updated one：//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 に答える