javascript - 如何根据输入字段的值在 span 标签中显示文本

Question

我想根据输入字段的值在 span 标签中显示文本“USERNAME”。

如果输入字段有任何值，我想在 span 标记中显示文本“USERNAME”。如果输入字段没有值，那么我希望 span 标签中没有文本。

$(function () {
    $("#username-input")
        .keydown(function () {
            function addRemoveUsername() {
                var inputChecker = document.getElementById("username-input");
                if (inputChecker.value == "") {
                    document.getElementById("name")
                        .innerHTML = "";
                } else {
                    document.getElementById("name")
                        .innerHTML = "USERNAME";
                }
            }
            addRemoveUsername();
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="login-form">
    <span id="name"></span><br>
    <input id="username-input" type="text" placeholder="USERNAME">
</form>

我该怎么做？

Answer 1

使用 .keyup 作为下面的代码片段。

$(function () {
  $("#username-input").keyup(function() {
    var inputChecker = document.getElementById("username-input");
    //blank spaces will be trimmed before text from the input field
    if ($.trim(inputChecker.value) == "") {
      document.getElementById("name").innerHTML = ""; 
      inputChecker.value = "";
    } else {
      document.getElementById("name").innerHTML = "USERNAME";
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id ="login-form">
    <span id="name"></span><br>
    <input id="username-input" type="text" placeholder="USERNAME">
</form>