2

ここで利用可能なプラグインを使用して、X ボタンをクリックしてテキストボックス内のテキストを削除しています。テキスト ボックスにテキストが入力された場合にのみ X ボタンが表示されるようにコードを変更するにはどうすればよいですか? JavaScriptコードでリターンスターメントの条件を設定しようとしましたが、うまくいきませんif ($('#search').val().length != 0)。これが私が試したコードです：

$(document).ready(function(){
    if ($('#search').val().length != 0){
        $('#search').clearable();
        $('.divclearable').show();
    }
    else{
        $('.divclearable').hide();
    }
});

どんな助けでも大歓迎です。

4

4 に答える 4

5

keyupリスナーを追加-

$(function () {
    $("#search").on("keyup", function() {
        if ($('#search').val().length != 0){
            $('#search').clearable();
            $('.divclearable').show();
        }
        else{
            $('.divclearable').hide();
        }
    });
});
于 2012-07-27T16:26:18.553 に答える
1

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();
    }
);
于 2012-07-27T16:30:38.517 に答える
0

ロジックについてお話しします。独自の実装を行う必要があります。閉じるボタンを表示する「clearlink」という css クラスがあります。それを変更して、初期値を次のように設定します。または clearlink のコピーを clearlink1 として作成し、要素のクラス名を変更します。

ブラウザのインス​​ペクト エレメント機能を使用するだけです。

于 2012-07-27T16:34:05.670 に答える
0

要素のテキストが 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();
    }
};
于 2012-07-27T16:32:55.633 に答える