Question

我想使用java脚本显示和隐藏按钮。

我的问题是按钮应该在页面加载时隐藏，当我在文本框中更改文本时，应该显示按钮。

感谢.....

Answer 1

请检查此页面并告诉您这是否是您想要的。

基本上，您需要使用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>

Answer 2

尝试使用jQuery：

$("#yourInput").bind("change", function() {
    var value = $(this).val();
    if (value && value.length > 0) {
        // Exist text in your input
        $("#yourButton").show();
    } else {
        $("#yourButton").hide();
    }
});

对于非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);
    }
}

同样，不要显示/隐藏按钮，只需禁用它，即可获得最佳用户体验。

Answer 3

你可以将CSS设置为visibilty：隐藏然后在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';
   }

这会使它出现在焦点上，但是如果你想进一步发展，你可以在文本框聚焦时为键击添加另一个事件监听器。这可能会奏效。

Answer 4

这是根据文本框中更改的文本隐藏/显示div。

使用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>

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>

Answer 5

试试这个：

＆＃13;

<script>
  function
  changeButton() {
    document.getElementById("changeButton").innerHTML = "Insert text for button";
    document.getElementById("changeButton").removeAttribute("hidden");
  }
</script>

＆＃13;

<button hidden id="changeButton"></button>

＆＃13;

javascript按钮显示/隐藏文本已更改

5 个答案: