beholdr/maska

Simple zero-dependency input mask for Vue.js and vanilla JS.

maska's Issues

If the first character(s) is not pattern show it initialy in the input

I think it would be very useful for phone numbers with country code. It suggest to the user where to start type their phone.

For example in Hungary we commonly use 2 types of mobile format:
'+36 ## ### ####' and '06 ## ### ####'
If one of showed initialy in the input field they know that they should only type the rest 9 numbers and not thinking which format they should start with.

And i think it's not just Hungary where this is common and will be useful 🙂 .

Input gets incorrect caret position with attached reactive

Hi. I couldn't understand what is a reason for such behavior, but if we have any reactive which changes it's state on focus event, and for example css class binded to this reactive, when we focus our input (by click) caret goes to start of input.

If we remove css class binding(or maska directive :) ) it works fine.

Reproduction link - https://codesandbox.io/s/competent-turing-6kmb2?file=/src/javascript/components/Coupon.vue
You can view it yourself by clicking inputs on repro link.

This becomes a big problem when you want a build custom input component
which need to support many states, i found only one way to fix it - change reactive state inside setTimeout (even nextTick won't solve the problem), but it introduces many other problems.

2021-11-02.05.19.48.mov

Dynamic mask to accept only numbers and '.'

taking this example : data-mask='["# cm", "#.# cm", "#.## cm"]' how can i only accept numbers and dot . it could be this one data-mask="#*" but i dont kow how to add dot.
i have tried "['#*','.']" but it not works i´m working with vue

I do not know if this is possible with this plugin, I mean add the . or 0

Feature Request: Persian or Arabic Numbers Support

The maska project is really simple and easy to use but it would be great to support masking the utf-8 numbers like Persian Numbers, Arabic Numbers and etc.

As I'm writing this feature request this issue exists and when you want to type the Persian characters, it would not get any input from user/keyboard. Please review this issue and if you want any example I can create a simple codesandbox for better understanding the problem...

problems using maskRawValue

Hi.

I'm facing two problems when using maskRawValue.

(1) - maskRawValue return undefined when v-maska value is null or undefined;
(2) - maskRawValue return outdated value(value BEFORE INPUT).

I'm using one approach to mask and retrieve unmasked input, every input component returns one object like:
{masked: 'value masked', raw: 'value unmasked'}

My updateValue method inside input component:

this.$emit("update:modelValue", {
        masked: evt.target.value,
        raw: evt.target.dataset.maskRawValue || evt.target.value,
      });

Now, if I insert one console.log inside the updateValue method, using one input component with "#*" mask, and I type '111'. This is the output:

I think the maskRawValue should return the same value as evt.target.value, but without mask.

Maska and forms

Hi. Didn't see where I could ask other than here: is there a way to obtain the unmasked values from a form before submit without having to traverse all fields and collecting the raw values?

Object Rest/Spread Properties

Hello when i use my app in browser edge i have an error javascript "Expected identifier, string or number" and if i click on the error i have :
opts.tokens = mask.tokens ? { ...mask.tokens } : {}

my babel config is
{ useBuiltIns: 'usage', corejs: 3, }

Thanks

Mask is not applied on vue 3 on first load

i'm using version 1.4.2, when the value is set in the model inside setup function, the mask is not applied, i need to re render the component changing the :key parameter in some parent node to force the rendering. It should apply the mask when the component is loaded :)

Upgrade to Vue 3.1.4 + maska 1.4.4 = broken

Hi, same problem here.
I just upgrade Vue to 3.1.4 and v-maska to 1.4.4, any view using v-maska throws error:

Uncaught (in promise) TypeError: Cannot read property 'match' of undefined
at n.value (maska.esm.js?795b:6)
at h (maska.esm.js?795b:6)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:155)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:164)
at invokeDirectiveHook (runtime-core.esm-bundler.js?5c40:3952)
at Array.eval (runtime-core.esm-bundler.js?5c40:4972)
at flushPostFlushCbs (runtime-core.esm-bundler.js?5c40:358)
at flushJobs (runtime-core.esm-bundler.js?5c40:394)

And the application dies.

masking function, or value preprocessing

Hi. Can i somehow preprocess value before masking, or maybe pass function with masking logic.
I'm trying to handle case with safari and autofilling input.

Safari autofills card expiration date input with value "12.2032" for example, and i have a mask "## / ##".
Current mask behaviour is to turn value into 12 / 20 (which is kinda logically correct), but it's wrong as value, i want to have 12 / 32, can i achieve it somehow by now?

Dynamics masks - problem

Hi,

I have a problem with multiple masks :
data-mask='["AA-###-AA", "#### AAA ##"]'

the first mask works but the second mask does not work

Example : https://codepen.io/neopheus/pen/QWKYaKZ

Have you a solution ?

Getting Raw Values

I'm still confused on how to get the raw value of an input. Can you provide some example code?

FEATURE REQUEST, SHOW MASK WHILE TYPING

Example: ##/##/#### will be 11/__/____
Thanks

Can't import Maska in my Vue 3 TS Project

Good day,

Please I need help.
I have a project with Vue 3 and support for Typescript. I installed maska but can't import or Vue don't recognize it.

package.json

    "core-js": "^3.6.5",
    "maska": "^1.3.1", <---- Maska 1.3.1 support Vue 3
    "vue": "^3.0.3",
    "vue-class-component": "^8.0.0-0",

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue'
import FluidWrapPage from './components/layout/FluidWrapPage.vue'
import Maska from 'maska' <<<-------- Don't recognize

import './assets/less/global.less'

const app = createApp(App)

app.component('FluidWrapPage', FluidWrapPage)

app
  .use(store)
  .use(router)
  .use(Antd)
  .use(Maska.install)
  .mount('#app')

The screenshot of error:
https://i.imgur.com/AJi56Cq.png

Mask price

How to mask prices?
e.g.:

12500 → 125,00
100 → 1,00

Is it possible to retrieve the raw value?

When using the v-maska directive, the model value is the same as the display value. Can we configure it to display the masked value but output the raw value?

not work for me

Hi,
i try use dynamic mask like it : v-maska="['A#A#A#', '#####']"
can type only digital.

best regards,
Vasiliy

RegExp into the mask

How can I substitute RegExp into the mask, for example: ^ [0-9] [0-9]? $ | ^ 100 $. I do not see such a possibility in the documentation.

Bug

Use first example with phone mask: https://beholdr.github.io/maska/

enter 2: empty -> +1 (2 (raw value: 2)
clear
enter 1: empty -> +1 (raw value: empty)
however i expected: +1 (1 (raw value: 1)

Mask monetary value dynamically

How to mask values like

12345678.99 TO 12,345,678.99
1234.56 TO 1,234.56

I don't know how many digits the user will input, i want to put each decimal separator correctly.

I tried create a token with regex to match a number followed by a dot as separator, but it will never work since it needs a dot to match the regex i think.

I can't think a way to do it in Maska.

Masking money value

Hi, thanks for your time building this awesome package for vue 3...

I need to mask money, but I have been facing some problems to retrieve the value.

I need to show value masked, but retrieve value as double.

Another problem is in Brazil we use " ," as floating point, not "."

Then, this input:
150,50

need to be parsed as:
150.50

I tried using this mask: R$ #*!,##
But, when I "unmask" the input, your package returns just numbers with out any floating point, and I need to find a way to get the floating point when unmasking the input.

Unexpected behavior with "(##) 9####-####" mask

I'm trying to add a mask to a phone input in Brazilian format. So I'm using (##) 9####-#### as the mask, but the input after (##) 9 does not accept any number other than 9:

Backspace & delete jump cursor to end of input when used on first character

Using either the DELETE key or BACKSPACE Key to delete the first character in a mask results in the cursor jumping to the end of the input

Maska and multiline textarea

Hey. Is there a way to use it with multiline textarea, one mask for each row? My task: pre-validate some csv-based data

Mask is not applied on a async update

Hello, when I update a model via promise or setTimeout for example, the mask is not applied

<Input
    type="text"
    name="cnpj"
    class="form-control form-control-lg form-control-solid"
    placeholder="CNPJ"
    v-model="agentAccountDetailForm.cnpj"
    v-maska="'##.###.###/####-##'"
  />

const agentAccountDetailForm = ref<IAgentAccountDetailForm>({
      cnpj: "",
    });

It's Working using this way:

agentAccountDetailForm.value.cnpj = '11111111';

Not Working using this way:

setTimeout(() => {
      agentAccountDetailForm.value.cnpj = '11111111';
    }, 20)

Not working using this way:

watchEffect(()  => {
      const company = currentAgentAccountDetail.value.company;
      agentAccountDetailForm.value.cnpj = company?.cnpj;
    });

is it possible to force the update of an element's mask?

Is it possible to define data-mask inside mask object?

I dont want to mark html.

Show mask characters immediately, not after the next character has been entered

Please see this GIF. We have a mask with a dot separator and the dot is only shown after we have entered the character after it. It would be great if we can see the dot once we have entered the first 2 characters and then 4 character.

caret position on dynamic mask

I love maska. I'm not sure if this behavior is intentional or a bug. from ux point of view, the following would be the expected behavior.

Reproduction Link: https://beholdr.github.io/maska/ (dynamic mask)

expected behavior:
if i fill this input with one or multiple numbers, then I would expect that the cursor/caret is always at the end of the number just entered.

current behavior:
the cursor/caret is always at the end of the mask.

how to use phone and email in one mask vue

How set max length in mask

Hi all, how set max length mask input
I need the word to be no longer than 30 characters
[{ mask: 'SX*', tokens: { X: { pattern: /[a-zA-Z0-9-_-]/, transform: (char: string) => char.toLowerCase() }, S: { pattern: /[a-zA-Z]/, transform: (char: string) => char.toLowerCase() } } }]

Masks don't work on input type of number

Hello,

Sorry to raise another issue, but I came across this one today. If the input type is number, the masks seem not apply. It allows all the things that html5 number input allows. For example in your demo, if I change the input type to "number" it allows me to put in "e", "-", and "." even though the mask is #*. Any thoughts on this? Thanks for any help.

Mask with optional sign not working

Hi,
I think maska is great and easy plugin, but I think it is not working as I expected it to work, when I woul like to have 2 or more mask.

For example, as I understand I can have 2 masks: v-maska="['#,##', '-#,##']" and it should work in that way, that the user can prefix the number with minus sign or not. But whatever I press, I can not insert minus sign?
It also alows me just to insert 4 numbers, and then deletes everything. So I guess I'm doing something wrong here?

Thanks.

Number Input still allows "e", ".", and "-" characters as the first character input

Hi,

Really like the update for the 1.1.3 version and it's helped significantly! One problem still remains though. When using input type of "number" the first character typed if [e, ., -] does not trigger the beforeInput() method. It seems like since the mask is not yet inited, that the beforeInput() method is not triggered. After backspacing it and trying to put in another invalid character, it blocks it correctly. Thanks for any updates!

Edit: This behavior is existent in Chrome.

Bug with dynamic mask printing unnecessary symbol

Hi

Given we use mask
v-maska="['#####-####','#####']"
after inputting 5th character it prints "-"

It does not happen with this kind of mask:
v-maska=" ['!######', '!######-##']

I would expect it not to print the "-" in the first scenario.

Thanks

How to limit the length of the value?

How can I limit the number of characters in the input and keep only two decimal places applicable?
I only need a maximum of 8 characters to be written, counting the two decimals and the point
i mean ######.##

extra backspace key required for deleting

We need 1 extra backspace key for any placeholder character like '-' in patterns. In a pattern like ##-# we need 3 backspace keys to remove the second # from the right instead of 2 backspace keys.

Do masks work with non-input elements?

For example, to use the mask on a span, p, div...

Option to 'reverse' the order in which the mask applies

As far as I've seen the mask currently always applies from left to right on the characters.
The mask #,### would give 1, then 1,0, then 1,00 and finally 1,000 when a user enters 1000.

I need users to input very large numbers (9+ digit ints) so for me the comma to seperate thousands is very important.
If I could reverse the interpretation it would give: 1, then 10, then 100, then 1,000.

I can add it and create a PR if you like?

Complex Custom Token

Hello,

i would like to use the custom token function to validate an input field for a valid time.

v-maska="{ mask: 'UU:UU', tokens: { 'U' : { pattern: /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/ }}}"

This is my code, but it doesn't work. Can i even pass a regex as pattern as shown above?

thx for your answer :)

Markus

How to autofill the last character of a mask and be a specific letter

We are trying to define a mask that would allow inputs such as:
12-123456A
90-876543A
Where the first 2 characters are always digits.
The 3rd character would be autofilled to be a dash.
The 4th through the 9th characters would always be digits.
The 10th character would be autofilled to be an A.
We tried two alernative masks:

v-maska="##-######!A"

v-maska="{​​​mask:'##-######!A', tokens: {​​​'A': {​​​ pattern: /A/, uppercase: true }​​​ }​​​}​​​"

They both ensure that the input is valid, but does not autofill the 10th character automatically.
Is there a way to do that?

ssr fail

On build error:

Custom directive is missing corresponding SSR transform and will be ignored.

See this thread for suggestions: vuejs/vitepress#92

Feat Request: add a modifier to v-maska to return the unmasked value

Its possible to add modifiers to a directive Info here.

Would be great if instead use @maska event, simply add a directive as below.

<input
   v-maska.raw="(##) ####-####"
   v-model="phone"
/>

No formatting on model changes

First of all: thanks for the awesome library it helps me to get over my frustrations of integrating Cleave with vue.js :-)

One thing I noticed: when I have a text field bound to a v-model and there are other fields writing into this model, the formatting is not applied to the updated state. Are there any plans to support this in the future? And if not: is there a way to call the maska formatter by hand on a string variable directly? This would help me to apply the formatting before writing it back to the model.

How to write mask for numbers like '123 456 789,0', '12 345 678,9' ?

subject

How to write mask for IP numbers ?

Hi, help pls, how needs rules mask for check ip address

Cannot read property match of undefined in Vue 2 and Vuetify project

Probably It's related with Vue 3 plugin compability, but the masks became broken since 1.4.3 update (1.4.4 also return this error)

transform char problem

I need to display +7 (

For this I do

					var mask = Maska.create('input[name="telephone"]', {
						mask: '+T(###)###-##-##',
						tokens: {T: { pattern: /[0-9]/}, transform: (char) => { 7 }} 
					});

But when you enter a number, + is displayed and this number, how to make + T simply be replaced by +7

Reactivity-driven dynamic masking

Hello, and thanks for contributing such a great library!

I have one question that I'm not really able to answer based on what I'm seeing in your docs. For UX concerns, I'd like to be able to apply one mask to an input field based on the state of a reactive data property being read by Vue.

My use case is detecting a credit card type and applying one of two masks based on if the card is an American Express or not. Ideally, I would like to be able to do something like the following (apologies for the extremely contrived example):

Template:
<input v-model="creditcard.number" maska="creditCardMask'>

Computed:

computed : {
  creditcardMask() {
    if (this.creditcard.type === "American Express") { // card type is detected based on the value of creditcard.number
      return "#### ###### #####";
    else {
      return "#### #### #### ####";
    }
  }
}

Passing those two masks as described in the docs - as an array directly into the input - isn't having the desired effect, and in some cases is negatively affecting the UI.

Any help here would be greatly appreciated, and thanks again for the package!

Optional mask

Is it possible to create an optional mask like: #.## cm where the user can write: 1.32cm or 1.3cm? And also for a more complex one. I want to make it so the user can type 67.300 kg or 67kg and the variations for kg.

Dynamic masks don't work when using escape character "!"

Very happy to see that dynamic masks are now supported! However, since we want our users to be able to backspace through the mask, I've been postfixing the masks with literals that are escaped with "!".

For example, if we were to take blood pressure as an input, a normal number would look like this: 120/80. However, possible values can be anywhere from 70/40 to 190/100. Your dynamic implementation works if the user is not able to backspace or remove the mask from the input.

However, we want the delimiter, in this case "/" to be put in by the user.

Concrete example:
mask: '["##/", "###/"]';

input: 12
yield: 12/

input: 123
yield: 12/3 -> 123/

And in this case we can not backspace the "/". If you escape it using it like this, it works better:

mask: '["##!/", "###/"]';

However, it breaks the dynamic functionality and only applies the first mask. Do you have any idea what could be done to alleviate this or what the effort would be to fix this?

Thanks for any help.

Edit: I looked into it and it looks like it might be possible to do this with the pattern flag. However, I don't think the pattern flag support multiple inputs does it? If one token could support multiple characters it could be a viable option.