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

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

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

$（函数（）{
$（“#用户名输入”）
.keydown（函数（）{
函数addRemoveUsername（）{
var inputChecker=document.getElementById（“用户名输入”）；
如果（inputChecker.value==“”）{
document.getElementById（“名称”）
.innerHTML=“”；
}否则{
document.getElementById（“名称”）
.innerHTML=“用户名”；
}
}
addRemoveUsername（）；
});
});



使用
.keyup
如下代码片段


$（函数（）{
$（“#用户名输入”）.keyup（函数（）{
var inputChecker=document.getElementById（“用户名输入”）；
//将在输入字段中的文本之前修剪空格
如果（$.trim（inputChecker.value）==“”）{
document.getElementById（“名称”）.innerHTML=“”；
inputChecker.value=“”；
}否则{
document.getElementById（“名称”）.innerHTML=“用户名”；
}
});
});



这就是你的意思


$（函数（）{
$（“#用户名输入”）
.keyup（函数（）{
$（'span#name'）.text（$（this.val（）.length==0？'USERNAME'：''）；
});
});

用户名

解决方案：

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

解决方案和工作JS-bin链接

试试这个

HTML

别忘了包括jQuery库。
试试这个，它应该可以工作

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

</script>


$（文档）.ready（函数（）{
$（'#用户名输入'）。在（'change paste keyup'，function（）上{
if（$（this.val（）=''）
{
$（'#name'）.html（''）；
}否则{
$（'#name'）.html（'USERNAME'）；
}
});
});
虽然这是一个公认的答案，但如果有人提供更好的替代方案，而不是试图满足OP的要求，那就更好了。跨度不是标签元素的替代品。您正在使用输入创建一个表单，并使用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添加内容（虽然您显然不想只显示用户名文本，但如果您只想显示用户名文本，那么更好的方法是将内容放在其中，并简单地隐藏它或使用CSS显示它，或者切换类以交换显示，或者使用可见性：隐藏。）（请注意，如果使用display:none，则会弄乱布局并将输入向上移动到空间中）

所有这些都不是针对你的OP-你在问一个问题并试图学习-这条信息是针对答案的海报-所有人都匆忙回答一个问题，没有人停下来思考这个问题是否正确，以及他们的答案是否会加强新编码员的学习。
你在consoleEv中看到任何错误吗您的代码正在运行。如果您正在使用JQuery，正如您的提琴所暗示的，$（“name”）.text（myValue）设置ID“name”范围内的文本内容，$（“username input”）.val（）获取输入值。使用.text（）而不是.html（）是一种很好的做法，因为它的效率略高，而且还添加了一个额外的（精简的）参数卫生层。没错。：）你的说法是正确的，很有道理。谢谢。
<span></span>
<input type=text>

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

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

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

</script>

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