Javascript 如果输入不为空则显示按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10709884/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show button if input is not empty
提问by John
I am not much of a JavaScript guru, so I would need help with a simple code. I have a button that clears the value of an input field.
我不是一个 JavaScript 大师，所以我需要一个简单代码的帮助。我有一个按钮可以清除输入字段的值。
I would like it (the button) to be hidden if input field is empty and vice versa (visible if there is text inside the input field).
如果输入字段为空，我希望它（按钮）被隐藏，反之亦然（如果输入字段中有文本则可见）。
The solution can be pure JavaScript or jQuery, it doesn't matter. The simpler, the better.
解决方案可以是纯 JavaScript 或 jQuery，没关系。越简单越好。
回答by Explosion Pills
$("input").keyup(function () {
if ($(this).val()) {
$("button").show();
}
else {
$("button").hide();
}
});
$("button").click(function () {
$("input").val('');
$(this).hide();
});
回答by Ilya Karnaukhov
if(!$('input').val()){
$('#button').hide();
}
else {
$('#button').show();
}
In it's simplest form ;)
以最简单的形式;)
回答by MilkyWayJoe
to do this without jQuery (essentially the same thing others already did, just pure js). It's pretty simple, but I've also added a few comments.
在没有 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>?
Note: I've written and tested this in IE9 and Chrome, make sure you test it in other browsers. Also, I've added this fiddleso you can see it working.
注意：我已经在 IE9 和 Chrome 中编写并测试了它，请确保在其他浏览器中进行测试。另外，我已经添加了这个小提琴，所以你可以看到它的工作。
回答by Vivin Paliath
First hide the button on page load:
首先在页面加载时隐藏按钮：
jQuery(document).ready(function() {
jQuery("#myButton").hide();
});
Then attach an onChangehandler, which will hide the button whenever the contents of the text-field are empty. Otherwise, it shows the button:
然后附加一个onChange处理程序，它会在文本字段的内容为空时隐藏按钮。否则，它会显示按钮：
jQuery("#myText").change(function() {
if(this.value.replace(/\s/g, "") === "") {
jQuery("#myButton").hide();
} else {
jQuery("#myButton").show();
}
});
You will also need to hide the button after clearing the input:
清除输入后，您还需要隐藏按钮：
jQuery("#myButton").click(function() {
jQuery("#myInput").val("");
jQuery(this).hide();
});
回答by Only Bolivian Here
You can use $('selector').hide()to hide an element from view and $('selector').show()to display it again.
您可以使用$('selector').hide()从视图中隐藏元素并$('selector').show()再次显示它。
Even better, you can use $('selector').toggle()to have it show and hide without any custom logic.
更好的是，您可以使用$('selector').toggle()它在没有任何自定义逻辑的情况下显示和隐藏它。
