2つのフィールドの入力を動的にコピーし、3番目のフィールドに貼り付けますか？

Question

名前と姓フィールドを別の「ユーザー名」フィールドに動的にコピーしようとしています。 Usernameフィールドも小文字で、中央にハイフンが必要です。ですから、例えば、

• 姓=ジョン
• と姓=スミス
• その後、ユーザー名（動的に作成）=ジョン・スミス

任意のアイデアであれば？

Answer 1

プレーンなJavaScriptでこれを行うことができます。私はフィールドを一緒に追加するいくつかの並べ替えのボタンがあると仮定しています。また、入力が<input>のテキストボックスであると仮定します。

document.getElementById("button").addEventListener("click", function() { 
 
    var firstName = document.getElementById("firstName").value; 
 
    var lastName = document.getElementById("lastName").value; 
 
    var userName = document.getElementById("userName"); 
 

 
    userName.value = firstName.toLowerCase() + "-" + lastName.toLowerCase(); 
 
});

<input id="firstName" type="text" placeholder="First Name" /> 
 
<input id="lastName" type="text" placeholder="Last Name" /> 
 
<input id="userName" type="text" placeholder="Username" disabled /> 
 
<button id="button">Create Username</button>

、それが動的に更新しますonkeydownまたはonkeyupを使用します。答えはkemotoe'sです。

Answer 2

jqueryでも実行できます。これは実用的な例です。 Working Fiddle

HTML

<input id = "first"> <br> <br> 
<input id = "last"> <br> <br> 
<input id = "username"> 
<button id ="generate">Generate</button> 

JS

$("#generate").on("click",() => { 
     let first = $("#first").val() 
     let last = $("#last").val() 
     $("#username").val(first+ "-"+last) 
}) 

Answer 3

$('#firstName').change(updateUsername()); 
$('#lastName').change(updateUsername()); 
function updateUsername(){ 
    $('#userName').val($('#firstName').val().toLowerCase() +"-"+$('#lastName').val().toLowerCase()); 
} 

ユーザー名フィールドを更新するために変更イベントとバインド

Answer 4

別のオプションは、onkeyupイベントを使用して動的にしています。これは大文字も処理します。

function generateFullName() { 
 
    document.getElementById("username").innerText = 
 
    document.getElementById("fName").value.toLowerCase() + 
 
    "-" + 
 
    document.getElementById("lName").value.toLowerCase(); 
 
}

First Name <input type="text" id="fName" onkeyup="generateFullName()" /> 
 
Last Name <input type="text" id="lName" onkeyup="generateFullName()" /> <br/> 
 
Username: <span id="username" />

Answer 5

あなたがonkeypressイベントを使用することができます。

それはあなたが少し手の込んだことができます。この

document.querySelector('.form').addEventListener(("keypress"),() => { 
 
    //Code to edit the username field goes here 
 
    //Try pressing a key inside the form 
 
\t alert('Hi'); 
 
});

<form class='form'> 
 
    <input type="text"> 
 
    <input type="text" > 
 
    <input type="text" class='username'> 
 
</form>