如何根据输入字段的值在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> 

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 - 你提出问题并试图学习 - 这个消息是答案的海报 - 所有人都急于回答一个问题而且没有人停下来思考问题是正确的，他们的答案是否会增强新编码员的学习能力。