CODEWITHSUNDEEP
javascriptvue.js
T dhanunjay
T dhanunjay

Reputation: 820

How to restrict Otp input field maxlength to one in Vuejs manually without using libraries?

      <div class="otp-wrapper">
        <div class="enterprise-details">
          Enter OTP sent in SMS on your mobile XXXX XX 5136.
        </div>
        <div class="verify-wrapper">
          <input class="otp-number" type="text" placeholder="-" />
          <input class="otp-number" type="text" placeholder="-" />
          <input class="otp-number" type="text" placeholder="-" />
          <input class="otp-number" type="text" placeholder="-" />
        </div>
        <div class="receive-otp">
          Did not receive OTP? &nbsp;
          <b style="color: #ee1d24"> Resend Now </b>
        </div>
      </div>

How to restrict Otp input field maxlength to one in Vuejs? In the first input field, if i try to enter number, automatically it schould move to next field.

Upvotes: 0

Views: 584

Answers (1)

Abregre
Abregre

Reputation: 480

i found a vueJs package for otp input as you want. https://github.com/bachdgvn/vue-otp-input If you look at the code of the author, you can write an @change event that will change the focus to the next input field.

Upvotes: 1

Related Questions