3

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

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

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

4

5 回答 5

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 回答
7 
if(!$('input').val()){
    $('#button').hide();
}
else {
    $('#button').show();
}

以最简单的形式；）

于 2012-05-22T22:07:54.373 回答
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 回答
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 回答