入力フィールドの値に基づいてスパンタグにテキストを表示する方法

Question

入力フィールドの値に基づいてスパンタグにテキスト "USERNAME"を表示したいとします。

入力フィールドに値がある場合は、「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

ソリューションと作業J Sビンリンク 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

はこれを試してみてください、これは誰かがOPの要件に合うようにしようとするよりもより良い代替手段を提供した場合-itが良いだろう受け入れ答えを持っていますが、それは

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

</script> 

Answer 7

を動作するはずです。スパンはラベル要素の代替ではありません。あなたは入力があるフォームを作成していて、入力ラベルのサロゲートを使用しています。これは良くありません。ジョブの正しいツールを使用してください。次に、必要に応じてラベルの内容を変更することができます。

<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（） ）。

また、ユーザー入力に基づいてDOMにコンテンツを追加するというアイデアは、1つのフレーズでしかない場合もありますが（もちろん、USERNAMEテキストを表示するだけではありませんが、より良い方法は、コンテンツを既にそこに置いて隠すか、CSSを使って表示することです。クラスを切り替えて表示を切り替えたり、表示を使用したりすることができます：hidden（display：noneを使用すると、スペースへの入力）

これはOPとしてあなたにターゲット設定されていません - あなたは質問をして学ぶことを試みています - このメッセージは回答のポスターにあります。質問があったと答えたかどうか誰も考えを停止した新しいコーダの傾きを向上させるだろう。