кнопка JavaScript показать / скрыть текст изменен - PullRequest
Новая
       7

кнопка JavaScript показать / скрыть текст изменен

1 голос
/ 31 января 2012

Я хочу показать и скрыть кнопку с помощью java-скрипта.

Моя проблема заключается в том, что кнопка должна быть скрыта при загрузке страницы, и когда я изменил текст в текстовом поле, кнопка должна отображаться.

спасибо .....

Ответы [ 5 ]

9 голосов
/ 31 января 2012

Пожалуйста, проверьте эту страницу и скажите, если это то, что вы хотели.

По сути, вам нужно использовать событие 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>
2 голосов
/ 31 января 2012

Попробуйте с 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);
    }
}

Опять же, не показывайте / не скрывайте кнопку, просто отключите ее, чтобы сделать лучшего пользователяопыт.

0 голосов
/ 22 апреля 2018

Попробуйте это: 

<script>
  function
  changeButton() {
    document.getElementById("changeButton").innerHTML = "Insert text for button";
    document.getElementById("changeButton").removeAttribute("hidden");
  }
</script>
<button hidden id="changeButton"></button>
0 голосов
/ 12 августа 2016

Это чтобы скрыть / показать 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>
0 голосов
/ 31 января 2012

Вы можете присвоить CSS видимости: скрытый, а затем в 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';
   }

Это сделает его отображаемым в фокусе, но если вы захотите сделать еще один шаг вперед, вы можетедобавьте еще один прослушиватель событий для нажатия клавиш, когда текстовое поле сфокусировано на.Это, вероятно, сработает.

...