如何在Modal中粘貼資料-有解無憂

我正在嘗試實作一種將 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>

我已經按照這個開始了。我無法找到我在這里犯的錯誤。請幫忙，提前致謝

uj5u.com熱心網友回復：

我已經從我身邊嘗試過并撰寫了以下代碼。它對我來說很好用。

在您的代碼中，您已將 maxlength 設定為 1，因此當您輸入文本時只會在文本框中鍵入 1 個字符，因此每次只會執行 else 部分。只需從輸入中洗掉 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' />

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/380689.html

標籤：javascript 查询引导模式

上一篇：如何通過API呼叫使用預先輸入？

下一篇：從jQuery創建選項時，在select2中添加一個空選項