Question

我不是一个JavaScript大师，所以我需要一个简单代码的帮助。我有一个清除输入字段值的按钮。

如果输入字段为空，我希望隐藏它（按钮），反之亦然（如果输入字段中有文本，则可见）。

解决方案可以是纯JavaScript或jQuery，没关系。越简单越好。

Answer 1

$("input").keyup(function () {
   if ($(this).val()) {
      $("button").show();
   }
   else {
      $("button").hide();
   }
});
$("button").click(function () {
   $("input").val('');
   $(this).hide();
});

http://jsfiddle.net/SVxbW/

Answer 2

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

用它最简单的形式;）

Answer 3

首先隐藏页面加载上的按钮：

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();
});

Answer 4

您可以使用$('selector').hide()隐藏视图中的元素，并使用$('selector').show()再次显示该元素。

更好的是，您可以使用$('selector').toggle()让它显示和隐藏，而无需任何自定义逻辑。

Answer 5

在没有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中编写并测试了这一点，请确保您在其他浏览器中进行测试。另外，我添加了this fiddle，因此您可以看到它正常工作。

如果输入不为空，则显示按钮

5 个答案: