Input paste long text split to other input (jquery)

June 3, 2022

I am new to HTML and jQuery. If I paste the long text to first input, I wanted it to be automatically split to other input (based on space). Is it possible to do it in jQuery? Please help.

This is the code:

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>

>Solution :

Split your input text based upon space.
Loop between them to get each word on text box.

Example:

$(".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" />