How to paste data in Modal

Question

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 class="modal" id="verify_phone_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header pb-0">
          <span aria-hidden="true">&times;</span>
      </div>
      <div class="modal-body pt-0">
        <div class="profile-verification">
          <p class="verification-description">
          </p>
          <div class="verification-code-input-group d-flex">
            <input type="text" class="form-control otp_box" id="digit1" maxlength="1" placeholder="">
            <input type="text" class="form-control otp_box" id="digit2" maxlength="1" placeholder="">
            <input type="text" class="form-control otp_box" id="digit3" maxlength="1" placeholder="">
            <input type="text" class="form-control otp_box" id="digit4" maxlength="1" placeholder="">
            <input type="text" class="form-control otp_box" id="digit5" maxlength="1" placeholder="">
            <input type="text" class="form-control otp_box" id="digit6" maxlength="1" placeholder="">
          </div>
          <div class="form-group has-error">
            <span class="help-block hidden" id="phone_number_verification_error"></span>
          </div>
          <p class="verification-description has-action-item mt-4">
            
            <span role="button" class="btn-resend">
              
            </span>
          </p>
        </div>
        <div class="action-row">
          <div class="action-item">
          </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

Answer 1

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' />