javascript 按钮在文本上显示/隐藏已更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9075440/
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
javascript button show/hide on text changed
提问by Ghost Answer
I want to show and hide a button by using java script.
我想使用 java 脚本显示和隐藏按钮。
My problem is that the button should be hide on page load and when I changed the text in text box then button should be show.
我的问题是按钮应该在页面加载时隐藏，当我更改文本框中的文本时，按钮应该显示。
thanks.....
谢谢.....
回答by Umesh Patil
pls, Check this page and tell if this is what you wanted.
请检查此页面并说明这是否是您想要的。
Basically, you need to use onchange event to do whatever you want to do.
基本上，您需要使用 onchange 事件来做任何您想做的事情。
<html>
<head>
<script>
window.onload=function(){
document.getElementById("button").style.display='none';
}
function showButton(){
document.getElementById("button").style.display='block';
}
</script>
</head>
<body>
<input type="button" id="button" value="New Button"/>
Change the text in Input Box. Then Button will be show<br/><br/>
<input type="text" id="userText" value="Change the text" onchange="showButton()"/>
</body>
</html>
回答by KimKha
Try with jQuery:
尝试使用 jQuery：
$("#yourInput").bind("change", function() {
var value = $(this).val();
if (value && value.length > 0) {
// Exist text in your input
$("#yourButton").show();
} else {
$("#yourButton").hide();
}
});
For non-jQuery:
对于非 jQuery：
function onchangeInput() {
var value = this.value;
if (value && value.length > 0) {
// Exist text in your input
document.getElementById("yourButton").style.visibility = "visible";
} else {
document.getElementById("yourButton").style.visibility = "hidden";
}
}
window.onload = function() {
document.getElementById("yourButton").style.visibility = "hidden";
var el = document.getElementById("yourInput");
if (el.addEventListener) {
el.addEventListener("change", onchangeInput, false);
} else {
el.attachEvent('onchange', onchangeInput);
}
}
Again, don't show/hide a button, just disable it, that make the best user experience.
同样，不要显示/隐藏按钮，只需禁用它，即可获得最佳用户体验。
回答by zachdyer
You could style the css to visibilty:hidden then in javascript add an event listner like this:
您可以将 css 样式设置为 visibilty:hidden 然后在 javascript 中添加一个这样的事件监听器：
<script type="text/javascript">
var box = document.getElementById('box');
var textbox = document.getElementById('textbox');
textbox.addEventListener("focus",showbox,false);
function showbox() {
box.style.visibility = 'visible';
}
That would make it appear on focus but if you wanted to take it a step further you could add another event listener for a keystroke when the textbox is focused on. That would probably work.
这会使它出现在焦点上，但如果您想更进一步，您可以在文本框聚焦时为击键添加另一个事件侦听器。那可能会奏效。
回答by D.D
This is to hide/show a div based on text changed in text box.
这是根据文本框中更改的文本隐藏/显示 div。
With JQuery
使用 JQuery
<script type="text/javascript">
window.onload = function () {
document.getElementById("submitdiv").style.display = 'none';
}
$(function () {
$('.Name').on('keyup change', function () {
if (this.value.length > 0) {
$('#submitdiv').show();
} else {
$('#submitdiv').hide();
}
});
});
</script>
<script type="text/javascript">
window.onload = function () {
document.getElementById("submitdiv").style.display = 'none';
}
$(function () {
$('.Name').on('keyup change', function () {
if (this.value.length > 0) {
$('#submitdiv').show();
} else {
$('#submitdiv').hide();
}
});
});
</script>
HTML
HTML
<%:Html.TextBoxFor(m => m.FirstName, new { @class ="Name"}) %>
<div id="submitdiv">
<button type="submit" value="Submit" class="btn btn-primary pull-right value-set" id="btnLogin">Submit</button>
</div>
回答by avacato
Try this:
尝试这个：
<script>
function
changeButton() {
document.getElementById("changeButton").innerHTML = "Insert text for button";
document.getElementById("changeButton").removeAttribute("hidden");
}
</script><button hidden id="changeButton"></button>