Question

我试图将名字和姓氏字段复制到另一个用户名＆＃39;场动态。用户名字段也应该是小写的，并且中间有一个连字符。例如，

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

有什么想法吗？

Answer 1

您可以使用纯JavaScript执行此操作。我假设有一个按钮可以将字段添加到一起。还假设您的输入是<input>文本框。

＆＃13;

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();
});

＆＃13;

<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>

＆＃13;

要动态更新，请使用onkeydown或onkeyup。关注kemotoe's回答。

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来做。这是一个有效的例子。 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 4

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

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

Answer 5

您可以使用onkeypress事件。

看起来像这样

＆＃13;

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

＆＃13;

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

＆＃13;

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

5 个答案: