Question

我想显示文字＆＃34; USERNAME＆＃34;在span标记中，基于输入字段的值。

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

＆＃13;

$(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();
        });
});

＆＃13;

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

＆＃13;

我该怎么做？

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>

Answer 2

这是你的意思吗？

$(function () {
    $("#username-input")
        .keyup(function () {
           $('span#name').text($(this).val().length == 0 ? 'USERNAME' : '');
        });
});

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

Answer 3

解决方案：

<form id ="login-form">
<span id="name"></span><br>
<input id="username-input" type="text" placeholder="USERNAME" onkeyup='addRemoveUsername()'>

Javascript：

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

Answer 4

解决方案和工作JS bin链接 https://jsbin.com/perudafama/edit?html,console,output

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

Answer 5

试试这个，

HTML

<span></span>
<input type=text>

JS：

$("[type=text]").keyup(function(){

     $(this).val()==""?$("span").html(""):$("span").html("USERNAME");
})

不要忘记包含jQuery库。

Answer 6

试试这个，它应该有用

<script>
   $(document).ready(function(){
    $('#username-input').on('change paste keyup', function(){
        if($(this).val() == '')
        {
            $('#name').html('');
        }else{
            $('#name').html('USERNAME');
        }
    });
});

</script>

Answer 7

虽然这有一个公认的答案 - 如果有人提供了比尝试符合OP的要求更好的选择，那会更好。 span不是label元素的替代品。您正在创建一个带有输入的表单，并使用span作为输入标签的代理 - 这不是很好。使用正确的工具完成工作。然后，您可以根据需要更改标签的内容。

<form id ="login-form">
    <label for="username-input"></label>
    <input id="username-input" type="text" placeholder="USERNAME">
</form>

然后你需要考虑是否需要表格 - 你提交了吗？表单没有任何操作或方法或提交按钮 - 如果您通过AJAX进行操作就没问题，但是您的输入没有名称 - 如果您通过javascirpt / jquery进行再次操作 - 那么您可以获取值并通过AJAX提交 - 但如果你能做到这一点，那么我认为你有能力将解决方案应用于这个相当简单的问题。

同样不是那些建议在jQuery代码中添加/交换HTML的答案是完全错误的 - 如果你这样做你需要添加/交换文本（使用.text（）方法或.textContent如果使用vanilla javascript）

还有基于用户输入在dom中添加内容的想法，当它只是一个短语时（虽然你显然想要做的不仅仅是显示USERNAME文本 - 但如果你所做的一切都那么更好方法是将内容放在那里并简单地隐藏它或使用CSS显示它 - 切换一个类来交换显示或使用visibility：hidden（注意如果你使用display：none它会弄乱你的布局并移动它输入空间。）

这一切都不是针对你作为OP - 你是在问一个问题并试图学习 - 这个消息是答案的海报 - 所有人都急于回答一个问题而且没有人停下来思考问题是正确的，他们的回答是否会增强新编码员的学习能力。

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

7 个答案: