How to paste data in Modal-CodePudding

I'm trying to implement a modal that will take OTP for mobile verification. I have managed to come this far.

$(document).ready(function() {
  $(document).on("input", "input[id^=digit]", function(e) {
    var text = $(this).val();
     if (text.length == 6) {
      for (i=1 ; i<=text.length ; i  ) {
        $("input[id^=digit]").eq(i-1).val(text[i-1]);
       }
     }
     else if (text.length > 1) {
      $(this).val(text[0]);
     }
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div  id="verify_phone_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div  role="document">
    <div >
      <div >
          <span aria-hidden="true">&times;</span>
      </div>
      <div >
        <div >
          <p >
          </p>
          <div >
            <input type="text"  id="digit1" maxlength="1" placeholder="">
            <input type="text"  id="digit2" maxlength="1" placeholder="">
            <input type="text"  id="digit3" maxlength="1" placeholder="">
            <input type="text"  id="digit4" maxlength="1" placeholder="">
            <input type="text"  id="digit5" maxlength="1" placeholder="">
            <input type="text"  id="digit6" maxlength="1" placeholder="">
          </div>
          <div >
            <span  id="phone_number_verification_error"></span>
          </div>
          <p >
            
            <span role="button" >
              
            </span>
          </p>
        </div>
        <div >
          <div >
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I have followed this to get going. I am unable to find the mistake I'm making here. Please help, Thanks in advance

CodePudding user response：

I've tried it from my side and written the below code.it's working fine for me.

In your code, you have set maxlength as 1, so only 1 char will be typed in the textbox when you pest the text, so only else part will be executed every time. Just remove maxlength from input, your code also will work.

$(document).ready(function() {
            $(document).on("input", "input[name='chars']", function(e) {
                var text = $(this).val();
                if (text.length == 6) {
                    for (i=1 ; i<=text.length ; i  ) {
                        $("#chars" i).val(text[i-1]);
                    }    
                }
                else if (text.length > 1) {
                    $(this).val(text[0]);
                }
            });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Test</h1>
        <input type='text' name='chars' id='chars1' />
        <input type='text' name='chars' id='chars2' />
        <input type='text' name='chars' id='chars3' />
        <input type='text' name='chars' id='chars4' />
        <input type='text' name='chars' id='chars5' />
        <input type='text' name='chars' id='chars6' />