jquery两input内容同步

在Web开发中，有时候会遇到两个输入框需要同步输入内容的情况，比如在表单中，用户输入用户名和密码，同时需要在另一个输入框中再次确认密码，为了提高用户体验，我们可以通过jQuery实现两个输入框内容的同步。

1、准备工作

确保在HTML文档中引入了jQuery库，可以使用以下方式引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2、HTML结构

创建一个简单的表单，包含两个输入框，分别用于输入用户名和确认用户名：

<form id="myForm">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" />
  <label for="confirmUsername">确认用户名:</label>
  <input type="text" id="confirmUsername" name="confirmUsername" />
  
  <input type="submit" value="提交" />
</form>

3、jQuery代码

接下来，编写jQuery代码来实现两个输入框内容的同步，当用户在第一个输入框中输入内容时，第二个输入框的内容也会自动更新：

$(document).ready(function() {
  // 监听第一个输入框的输入事件
  $('#username').on('input', function() {
    // 获取第一个输入框的值
    var usernameValue = $(this).val();
    
    // 将第一个输入框的值设置为第二个输入框的值
    $('#confirmUsername').val(usernameValue);
  });
});

4、表单提交验证

为了确保用户在提交表单之前，两个输入框的内容是一致的，我们可以在表单的提交事件中添加一个验证：

$('#myForm').on('submit', function(e) {
  e.preventDefault(); // 阻止表单默认提交行为
  
  var username = $('#username').val();
  var confirmUsername = $('#confirmUsername').val();
  
  if (username !== confirmUsername) {
    alert('用户名和确认用户名不一致，请重新输入！');
    return false;
  }
  
  // 如果两个输入框内容一致，可以在这里进行表单提交或其他操作
  // ...
});

5、优化用户体验

为了进一步提升用户体验，可以为两个输入框添加实时的提示信息，当内容不一致时，给用户一个明确的提示：

$('#username').on('input', function() {
  var usernameValue = $(this).val();
  var confirmUsernameValue = $('#confirmUsername').val();
  
  if (usernameValue !== confirmUsernameValue) {
    $('#confirmUsername').addClass('error').attr('placeholder', '用户名不一致，请重新输入！');
  } else {
    $('#confirmUsername').removeClass('error').attr('placeholder', '');
  }
});

可以为输入框添加一些CSS样式，以便在内容不一致时显示错误提示：

input.error {
  border: 1px solid red;
  background-color: #ffe6e6;
}

通过以上步骤，我们实现了一个简单的jQuery两输入框内容同步的功能，这种方法可以提高用户在填写表单时的体验，减少因输入错误而导致的表单提交失败。