如何使用jQuery按空格拆分句子单词并填充到不同输入框

使用jQuery完全可以实现你描述的自动拆分文本填充输入框的需求，实现逻辑非常简单。

核心实现逻辑 #

• 监听第一个输入框的input事件，该事件可以同时覆盖手动输入、快捷键粘贴、鼠标右键粘贴所有场景，无需额外绑定单独的粘贴事件
• 触发事件时获取第一个输入框的文本内容，去除首尾空格后按空白字符拆分，同时过滤拆分产生的空值，避免连续输入多个空格时填充空内容
• 清空其余输入框的原有内容，将拆分得到的单词按顺序依次填充到后续对应位置的输入框中

完整可用代码 #

你只需要替换原有代码中<script>标签内的内容即可：

$(document).ready(function () {
  // 缓存所有输入框DOM，减少重复查询
  const allInputs = $('.input');
  const firstInput = allInputs.first();

  firstInput.on('input', function() {
    // 拆分文本，过滤空字符串
    const inputText = $(this).val().trim();
    const wordList = inputText.split(/\s+/).filter(item => item);

    // 遍历后续输入框填充内容
    allInputs.slice(1).each(function(index) {
      $(this).val(wordList[index] ?? '');
    })
  })
});

效果说明 #

• 输入或粘贴文本时实时触发拆分填充，不需要额外点击按钮
• 支持任意数量的连续空格分割，不会产生空的填充值
• 删除第一个输入框的内容时，后续所有填充的内容会同步清空
• 如果拆分出的单词数量少于后续输入框数量，无对应单词的输入框会保持为空；如果单词数量多于输入框数量，超出的单词会自动忽略
• 后续新增同class的输入框时无需修改JS代码，逻辑会自动适配

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