如何用JavaScript将两步登录表单的username值同步到confirmusername

要实现第一步输入的用户名自动填充到第二步的确认用户名输入框，只需修改processPhase1函数，在切换到第二步表单时，将获取到的用户名值赋值给确认用户名输入框即可。

修改后的完整代码 #

HTML

<form id="multiphase" onsubmit="return false">

  <div id="phase1">
    Username: <input id="username" name="username">
    <br>Password: <input id="password" name="password">
    <br>
    <button id="next" onclick="processPhase1()">Next</button>
  </div>
  
  <div id="show_all_data">
    Username: <span id="display_username"></span> 
    <br>Password: <span id="display_password"></span> 
    <br>Confirm Username: <input id="confirmusername" name="confirmusername">
    <br>Confirm Password: <input id="confirmpassword" name="confirmpassword">
    <br>
    <button onclick="send()">Send</button>
  </div>
  
</form>

CSS

form#multiphase {
  border: #000 1px solid;
  padding: 24px;
  width: 350px;
}

form#multiphase>#show_all_data {
  display: none;
}

JavaScript

var username, password, confirmusername, confirmpassword;

const _=(x)=>document.getElementById(x);
const send=()=>alert('send');

function processPhase1() {
  username = _("username").value;
  password = _("password").value;
  if (username.length > 2) {
    _("display_username").innerHTML = username;
    _("display_password").innerHTML = password;
    _("phase1").style.display = "none";
    _("show_all_data").style.display = "block";
    // 自动填充确认用户名
    _("confirmusername").value = username;
  }
}

function submitForm() {
  confirmusername = _("confirmusername").value;
  confirmpassword = _("confirmpassword").value;
  if( confirmpassword.length > 0 ) {
    _("multiphase").method = "post";
    _("multiphase").action = "";
    _("multiphase").submit();
  }
}

// 为第一步输入框绑定回车事件
document.getElementById("username").addEventListener("keypress", function(event) {
  if(event.key === "Enter") {
    event.preventDefault();
    document.getElementById("next").click();
  }
});
document.getElementById("password").addEventListener("keypress", function(event) {
  if(event.key === "Enter") {
    event.preventDefault();
    document.getElementById("next").click();
  }
});

// 为第二步输入框绑定回车事件
document.getElementById("confirmusername").addEventListener("keypress", function(event) {
  if( event.key === "Enter" ) {
    event.preventDefault();
    document.getElementById("send").click();
  }
});
document.getElementById("confirmpassword").addEventListener("keypress", function(event) {
  if( event.key === "Enter" ) {
    event.preventDefault();
    document.getElementById("send").click();
  }
});

关键改动说明 #

1. 在processPhase1函数中，切换到第二步表单后新增赋值代码，直接将第一步输入的用户名填充到确认用户名输入框。
2. 修复原代码中重复变量赋值导致的事件监听失效问题，为每个输入框单独绑定回车触发逻辑，保证功能正常。

内容的提问来源于stack exchange，提问作者Justin