如何在循环渲染的手机号输入框中实现内容同步（jQuery/JavaScript）

首先得提个小细节：你现在循环生成的输入框id都是phone，这不符合HTML规范哦——id必须是页面唯一的，重复id会导致后续JS选择元素出问题，所以第一步先调整渲染的代码，给每个输入框加唯一id的同时，统一加一个共同的class（比如phone-input），这样方便我们用JS批量操作：

@forelse ($survey->questions as $key=>$question)
<div class="input-field col s12">
  <!-- 改成唯一id + 统一class -->
  <input id="phone-{{$key}}" type="text" class="phone-input" placeholder="Enter your phone number" name="...">
</div>
@empty
<!-- 这里可以放没有问题时的提示内容 -->
@endforelse

接下来分两种场景给你写实现代码，你按需选就行：

场景一：仅第一个输入框触发同步 #

就是你说的，只有第一个输入框输入内容时，其他所有输入框跟着同步：

// 等页面DOM加载完成再执行
$(document).ready(function() {
  // 监听第一个phone-input的输入事件（包括打字、粘贴等操作）
  $('.phone-input:first').on('input', function() {
    // 获取当前输入的内容
    const currentPhone = $(this).val();
    // 给除了当前输入框之外的所有phone-input设置相同内容
    $('.phone-input').not(this).val(currentPhone);
  });
});

场景二：任意输入框修改都同步所有 #

如果想更灵活，用户修改任意一个输入框，所有输入框都同步更新内容，可以用这个：

$(document).ready(function() {
  // 给所有phone-input绑定输入事件
  $('.phone-input').on('input', function() {
    const currentPhone = $(this).val();
    // 给所有phone-input设置相同内容
    $('.phone-input').val(currentPhone);
  });
});

这里用input事件比keyup更靠谱，因为它能捕捉到鼠标右键粘贴、拖拽输入等非键盘触发的内容变化，兼容性也很好～

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