CODEWITHSUNDEEP
javascriptvue.js
T dhanunjay
T dhanunjay

Reputation: 820

How to add placeholder for v-input-field in vuejs?

 <input class="otp-number-login" 
                         input-classes="otp-number-login" type="password" placeholder="-" />
                        <input class="otp-number-login" 
                        input-classes="otp-number-login"  type="password" placeholder="-" />
                        <input class="otp-number-login"
                         input-classes="otp-number-login"  type="password" placeholder="-" />
                        <input class="otp-number-login"
                         input-classes="otp-number-login" type="password" placeholder="-" />

<v-otp-input
                              ref="otpInput"
                              input-classes="otp-number-login"
                              separator=""
                              :num-inputs="4"
                              :should-auto-focus="true"
                              :is-input-num="true"
                              input-type="password"
                              @on-change="handleOnChange"
                              @on-complete="handleOnComplete"
                            />

Reference from https://www.npmjs.com/package/@bachdgvn/vue-otp-input

I am having otp input field, So in the middle of each input field, I want place "-".

("-" is prefilled in otp field,before entering otp )

Upvotes: 0

Views: 795

Answers (2)

tony19
tony19

Reputation: 138546

A workaround is to select the component's inputs, and set the placeholder:

export default {
  async mounted() {
    await this.$nextTick()
    this.setInputPlaceholder()
  },
  updated() {
    // also apply placeholder in `updated()` in case component gets re-rendered
    this.setInputPlaceholder()
  },
  methods: {
    setInputPlaceholder() {
      this.$refs.otpInput.$el
        .querySelectorAll('input')
        .forEach(input => input.placeholder = '-')
    },
  },
}

demo

Upvotes: 1

6be709c0
6be709c0

Reputation: 8441

This option has not been supported by the creator yet.

There is an issue on the git repo open since March 2:
https://github.com/bachdgvn/vue-otp-input/issues/41

Upvotes: 0

Related Questions