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

溶液和工作Ĵ豳链接 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的要求提供了一个更好的选择。跨度不是标签元素的替代品。您正在创建一个带有输入的表单，并使用跨度作为输入标签的代理 - 这不太好。使用正确的工具来完成这项工作。然后您可以根据需要更改标签的内容。

<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如果使用香草javascript ）。

也是基于用户输入的内容添加内容的想法，当它只有一个单词（虽然你显然想要做的不仅仅是显示用户名文本 - 但如果这一切你做的那么更好的方法是将内容放在那里，并简单地隐藏或使用CSS显示它 - 切换一个类来交换显示或使用可见性：隐藏（请注意，如果使用display：none，它会混乱您的布局并移动输入到空间）

这些都不是针对你作为OP - 你问一个问题，并试图学习 - 这个消息是对答案的海报 - 所有的人都急着回答问题，没有一个人停下来思考问题是否正确以及是否回答呃会加强新编码员的学习倾向。