如何使用 jQuery 拆分基于 space 的句子中的单词并将每个单词填充到不同的输入字段中？

Question

我是 HTML 和 jQuery 的新手。如果我将长文本粘贴到第一个输入，我希望它自动拆分为另一个输入（基于 space）。是否可以在 jQuery 内完成？

这是代码：

https://codesandbox.io/s/kind-boyd-jnig1b?file=/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <!-- if type this long text to first input ,
      Split long text to each input 
      based on space -->

    work pork dork bark crack shame
    <br />
    <input class="input" />

    <input class="input" />

    <input class="input" />
    <input class="input" />
    <input class="input" />
    <input class="input" />
  </body>
  <script>
    // A $( document ).ready() block.
    $(document).ready(function () {});
  </script>
</html>

Answer 1

在第一个输入字段上设置“粘贴”处理程序。它将字符串值拆分为一个数组，然后循环遍历其他输入字段并使用下一个数组元素更新它们的值。

// A $( document ).ready() block.
$(document).ready(function () {
    $('input:first-of-type').on('paste', function() {
        let words = $(this).val().split(/\s+/);
        $('input:not(:first-of-type)').each(function(e){
            $(this).val(words[e])
        })
    });
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <!-- if type this long text to first input ,
      Split long text to each input 
      based on space -->

    work pork dork bark crack shame
    <br />
    <input class="input" />

    <input class="input" />

    <input class="input" />
    <input class="input" />
    <input class="input" />
    <input class="input" />
  </body>
</html>

Answer 2

根据 space.
在它们之间循环以获取文本框上的每个单词。

示例：

$(".input").keyup(function() {
  var arr = $(this).val().split(" ");
  $.each(arr, function(index, value) {
    $('input').eq(index).val(value)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
work pork dork bark crack shame

<input class="input" />
<input class="input" />
<input class="input" />
<input class="input" />
<input class="input" />
<input class="input" />

如何使用 jQuery 拆分基于 space 的句子中的单词并将每个单词填充到不同的输入字段中？

How to split words of sentence based on space using jQuery and fill each word in different input field?

jquery