动态复制两个字段的输入并将其粘贴到第三个字段中？

Question

我正在尝试动态地将“名和姓”字段复制到另一个“用户名”字段中。 用户名字段也应为小写，中间应带有连字符。 例如

• 如果名字=约翰
• 和姓氏=史密斯
• 然后，用户名（动态创建）= john-smith

有任何想法吗？

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的回答。

Answer 2

另一种选择是使用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 3

您也可以使用jquery。 这是一个有效的例子。 工作小提琴

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 4

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

与更改事件绑定以更新用户名字段

Answer 5

您可以使用onkeypress事件。

看起来像这样

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

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