3

私は JavaScript の第一人者ではないので、簡単なコードについては助けが必要です。入力フィールドの値をクリアするボタンがあります。

入力フィールドが空の場合は（ボタン）を非表示にし、その逆（入力フィールド内にテキストがある場合は表示）にしたいと思います。

ソリューションは、純粋な JavaScript または jQuery のどちらでもかまいません。シンプルであるほど良い。

4

5 に答える 5

7 
if(!$('input').val()){
    $('#button').hide();
}
else {
    $('#button').show();
}

最も単純な形式で ;)

于 2012-05-22T22:07:54.373 に答える
7 
$("input").keyup(function () {
   if ($(this).val()) {
      $("button").show();
   }
   else {
      $("button").hide();
   }
});
$("button").click(function () {
   $("input").val('');
   $(this).hide();
});

http://jsfiddle.net/SVxbW/

于 2012-05-22T20:47:07.097 に答える
1

jQueryなしでこれを行うには（本質的に他の人がすでに行ったことと同じで、純粋なjsのみ）。とてもシンプルですが、いくつかのコメントも追加しました。

 <body>
    <input type="text" id="YourTextBox" value="" />
    <input type="button" id="YourButton" value="Click Me" />
    <script type="text/javascript">

        var textBox = null;
        var button = null;

        var textBox_Change = function(e) {
            // just calls the function that sets the visibility
            button_SetVisibility();
        };

        var button_SetVisibility = function() {
            // simply check if the visibility is set to 'visible' AND textbox hasn't been filled
            // if it's already visibile and the text is blank, hide it
            if((button.style.visibility === 'visible') && (textBox.value === '')) {
                button.style.visibility = 'hidden';
            } else {
                // show it otherwise
                button.style.visibility = 'visible';
            }
        };    

        var button_Click = function(e) {
            // absolutely not required, just to add more to the sample
            // this will set the textbox to empty and call the function that sets the visibility
            textBox.value = '';  
            button_SetVisibility();
        };                

        // wrap the calls inside anonymous function
        (function() {
            // define the references for the textbox and button here
            textBox = document.getElementById("YourTextBox");
            button = document.getElementById("YourButton");
            // some browsers start it off with empty, so we force it to be visible, that's why I'll be using only chrome for now on...
            if('' === button.style.visibility) { button.style.visibility = 'visible'; }
            // assign the event handlers for the change and click event
            textBox.onchange = textBox_Change;
            button.onclick = button_Click;
            // initialize calling the function to set the button visibility
            button_SetVisibility();
        })();
    </script>
</body>​

注: 私はこれを IE9 と Chrome で作成してテストしました。他のブラウザーで必ずテストしてください。また、このフィドルを追加して、動作を確認できるようにしました。

于 2012-05-22T21:14:49.800 に答える
1

まず、ページ読み込み時にボタンを非表示にします:

jQuery(document).ready(function() {
    jQuery("#myButton").hide();
});

onChange次に、テキスト フィールドの内容が空の場合は常にボタンを非表示にするハンドラーをアタッチします。それ以外の場合は、次のボタンが表示されます。

jQuery("#myText").change(function() {
    if(this.value.replace(/\s/g, "") === "") {
       jQuery("#myButton").hide();
    } else {
       jQuery("#myButton").show();
    }
});

入力をクリアした後、ボタンを非表示にする必要もあります。

jQuery("#myButton").click(function() {
   jQuery("#myInput").val("");
   jQuery(this).hide();
});
于 2012-05-22T20:46:36.020 に答える
1

を使用$('selector').hide()して、要素をビューから隠したり、$('selector').show()再度表示したりできます。

さらに良いこと$('selector').toggle()に、カスタム ロジックなしで表示と非表示を切り替えることができます。

于 2012-05-22T20:46:53.397 に答える