seokky / vue-pincode-input Goto Github PK

Hi Seokky,

I found 2 another issues after you fixed the issue of copy paste:

1. now try to copy paste again on already entered data => you'll find all the copied data pasted on the focus cell only and the application will hang

2. try to copy paste a string => you'll find all the copied data pasted on the focus cell only and the application will hang

I think should not fill placeholder with 0;

I imported this package on a NuxtJS application and i got a syntax error message that says i cannot Cannot use import statement outside a module

Please how can i fix this?

Hey,

I've set the PincodeInput to 6 via <PincodeInput v-model="code" length='6' /> and it creates the boxes fine, however in the console I get the following error:

[Vue warn]: Invalid prop: type check failed for prop "length". Expected Number with value 6, got String with value "6".

found in

---> <PincodeInput>
       <VStepperContent>
         <VStepper>
           <OnboardingStepper> at resources/js/components/onboarding/OnboardingStepper.vue
             <VContent>
               <VApp>
                 <Root>

Any idea?

Thanks :D

I'm trying to clean the fields by setting v-model as null or '', but the field keeps with the value even though the v-model now has its value cleaned.

• I'm trying to apply styles in a component. I am using nuxt
  `

  <div class="text-center settings-heading">
    <img src="/dashboard/tPin.svg" height="100" width="100" alt="Trasaction Pin screen">
  </div>
  
  <div class="input-wrapper my-5 d-flex flex-column align-items-center " v-if="enterOldPin">
  
    <div class="text-center" >
      <h4 class="text-bold">Enter your old PIN </h4>
      <p class="text-muted"> An easier way to make payments</p>
    </div>
      <PincodeInput
        v-model="oldCode"
        placeholder=""
        :secure = oldCode
      />
  
  <button class="btn btn-primary my-5" @click="changePinScreen()" :disabled="oldCode.length !== 4"> Continue </button>
  </div>
  
  <div v-if="createNewPin">
  
    <div class="input-wrapper my-5 d-flex flex-column align-items-center ">
  
      <div class="text-center">
        <h4 class="text-bold">Create your PIN </h4>
        <p class="text-muted"> Enjoy an easier way to make payments</p>
      </div>
        <PincodeInput
          v-model="newCode"
          placeholder=""
          :secure = oldCode
          class=""
        />
        <button class="btn btn-primary my-5" @click="gotoConfirmPin()" > Continue </button>
    </div>
  
    <div v-if="showConfirmPin" class="input-wrapper my-5 d-flex flex-column align-items-center ">
      <div class= "text-center">
        <h4 class="text-bold">Confirm your PIN </h4>
        <p class="text-muted"> Enjoy an easier way to make payments</p>
      </div>
      <PincodeInput
        v-model="confirmCode"
        placeholder=""
        :secure = oldCode
      />
  
     <button class="btn btn-primary my-5" @click="changeTransactionPin" :disabled="disabled"> Continue </button>
    </div>
  </div>
  

  <script> import PincodeInput from 'vue-pincode-input' export default { components: { PincodeInput }, } <style scoped> .head-primary { color: var(--theme-color); } p { color: var(--font-color); } .user-details-card { padding: 1rem; } input.vue-pincode-input { background: #ffffff; height: 56px; max-width: 70px; margin-left: 1rem; font-size: 2.5rem; } </style>

  `

  • I also get 'Cannot import statement outside module' whenever i refresh the page in nuxt projext

Need to make the plugin usable with both Vue 2 and Vue 3. Actually, i don't know how to do this.

On Safari when someone types in numbers into the fields and taps several times outside the input field and back again into the input field the numbers start falling out of the input field.

The Vue app where we found this will be online from tomorrow on but I am quite sure that it is nothing specific to our project

can you give an example of use on CDN as global component.

thank you

i tried to copy paste a number into the pin code input but it always skip the first focused input and start pasting from the following one

any one can help??

Users can not paste code from somewhere (ex. email)

difficult to customize if you can give the option to add new regex rules
because your regex rules only let some charchere pass if like me you want to use lodash debounce to display

the user's password a few seconds before replacing it with special chars it is complex

PincodeInput.min.js?a7d0:1 Uncaught TypeError: Cannot read property 'extend' of undefined
at eval (PincodeInput.min.js?a7d0:1)
at Module../node_modules/vue-pincode-input/PincodeInput.min.js (chunk-vendors.js:748)
at webpack_require (app.js:854)
at fn (app.js:151)
at eval (cjs.js?!./node_modules/ts-loader/index.js?!./node_modules/eslint-loader/index.js?!./src/views/enter-id/enter-id.component.ts?vue&type=script&lang=ts:10)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/ts-loader/index.js?!./node_modules/eslint-loader/index.js?!./src/views/enter-id/enter-id.component.ts?vue&type=script&lang=ts (app.js:1067)

Im using VUE 3 + IONIC 4. Im receiving error by implementing the component

I cannot get virtual keyboard input to show in input fields.

So I'm using this inside a dialog in a vuetify app to prevent a user from entering in an admin page.
Functionally everything works great but because the way vuetify mounts dialogs the autofocus doesn't work right.
Is there a ref or a way to manually invoke a focus to the first element?
The following code does not work

<v-dialog v-model="pinDlg fullscreen>
    <CodeInput ref="pincode" .../>
</v-dialog>

if(this.pinDlg) {
    this.$refs.pincode.focus()
}

Let`s add type=password to input

Hello,

I'm trying to copy paste numbers into the pin code text fields but it always skip the focused input fields and start pasting from the following one

any one can help??

Try npm install @types/vue-pincode-input if it exists or add a new declaration (.d.ts) file containing declare module 'vue-pincode-input';

not working with nuxt

getting Cannot use import statement outside a module

sorry this is the wrong github, was on the wrong page.

Keyboard changes to alphanumeric keyboard when user deletes entered PIN via Mobile browser using property "secure"