- Currently, I am working on a Vue project and have implemented a numeric input component as shown below:
<template>
<input
v-regex="regex"
type="text"
/>
</template>
- The directive 'v-regex' is utilized with inputmask in the following manner:
Vue.directive('regex', {
bind(element, binding) {
inputMask({
regex: binding.value,
placeholder: '',
showMaskOnHover: false,
showMaskOnFocus: false,
clearMaskOnLostFocus: false,
}).mask(element)
},
})
- The aforementioned component is integrated into a form using the code snippet below:
<myComponent
id="myId"
class="my-class"
:placeholder="'write Number'"
/>
The issue at hand is that when clicking inside the input field and then outside of it, the placeholder text "write Number" disappears and does not reappear unless the page is refreshed. Is there a potential solution to resolve this issue? Your assistance is greatly appreciated.