如何在模态中粘贴数据

Question

我正在尝试实现一个模式，它将采用 OTP 进行移动验证。我已经走到这一步了。

$(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>

我已经按照 this 开始了。我找不到我在这里犯的错误。请帮助，提前致谢

Answer 1

我已经从我这边试过了，下面写的 code.it 对我来说工作正常。

在您的代码中，您已将 maxlength 设置为 1，因此在输入文本时只会在文本框中键入 1 个字符，因此每次只会执行其他部分。只需从输入中删除 maxlength，您的代码也将有效。

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

如何在模态中粘贴数据

How to paste data in Modal

javascript

jquery

bootstrap-modal