输入值的填充值与另一个字段的输入值

时间:2017-12-18 19:37:25

标签: javascript jquery

我想使用输入到first_name和last_name字段中的值填充host_name的输入值,以便全名显示在host_name字段中。这些字段位于同一页面上。 Jquery或纯JS。

<label for="first_name">First Name</label
<input id="first_name" type="text" name="first_name">

<label for="last_name">Last Name</label
<input id="last_name" type="text" name="first_name">

<label for="host_name">Host Name</label
<input id="host_name" type="text" name="host_name"> 

1 个答案:

答案 0 :(得分:0)

let firstName = document.getElementById("first_name");
let lastName = document.getElementById("last_name");
let hostName = document.getElementById("host_name");

firstName.addEventListener("change", (event) => {
    hostName.setAttribute("value", event.target.value);
});

lastName.addEventListener("change", (event) => {
    let firstValue = hostName.getAttribute("value");
    let lastValue = event.target.value;
    hostName.setAttribute("value", firstValue + " " + lastValue);
});

我希望这是你正在寻找的。