vue-r-mask - Directive with template similar to javascript regular expression.

Overview

vue-r-mask

mask directive for vue.js

  • Template similar to javascript regular expression. /\d{2}/
  • Directive useful for your own input or textarea.
  • Arbitrary number of digits in template /\d{1,10}/

Live Demo

Live Demo Source

Install in your project

npm install vue-r-mask

Run this demo repository

git clone https://github.com/raidan00/vue-r-mask.git
cd vue-r-mask
npm install
npm run dev
You might also like...
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Vue Fake input is a Vue.js based component to create custom inputs for individual characters.
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

Vue Fake Input Vue Fake input is a Vue.js based component to create custom inputs for individual characters. Table of Contents Installation Usage Lice

A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

vue-otp-input A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API. Installation To install the la

Set of vue directives to add text restriction to your vue input

Vue-Input-Restriction-Directives Set of useful vue directives to add text restriction to your input No keyboard key validation, just regular expressio

Vue Cleave component is based on cleave.js for Vue

Vue Cleave component is based on cleave.js for Vue

Masked input component for Vue.js

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo Install npm npm install vue-masked-input --save

Input field component to display a formatted currency value based on Vue.js

vue-numeric Input field component to display a formatted currency value based on Vue. Live Demo Works with Vue 2.* Installation Install via CDN scrip

A Vue.js component that wraps the awesome autoNumeric input formatter library
A Vue.js component that wraps the awesome autoNumeric input formatter library

vue-autoNumeric A Vue.js component that wraps the awesome AutoNumeric input formatter library Get in touch on vue-autoNumeric wraps the awesome AutoNu

A custom input number component for Vue.js 2

vue-input-number A custom input number component for Vue.js 2. Install Yarn yarn add vue-input-number --dev NPM npm install vue-input-number --save-de

Comments
  • vue-r-mask did not work with Vuetify text field

    vue-r-mask did not work with Vuetify text field

    Hello,

    I'm trying implement masking with v-text-field of vuetify Js but did not work.

    It is work well in Input Type as below <input name="name" v-model="masked_value" v-mask="pattern" placeholder="Choose email">

    I'm trying below code with vuetify its not working.

    <v-text-field
            name="name"
            v-model="masked_value"
            :label="label"
            :placeholder="placeholder"
            outlined
            dense
            hide-details="auto"
            :class="classes"
            v-mask="pattern"
          >
          </v-text-field>
    

    Please give me any solutions.

    opened by viralprajapati94 1
  • Change the placeholder character?

    Change the placeholder character?

    Hello, It's there any way to change the placeholder character in the input?

    I've tried to dig the code but it seams that for the moment it's fixed. Right?

    opened by caneco 1
  • Allow placeholders and add extra examples

    Allow placeholders and add extra examples

    This PR allows people to include place holder text.

    If there is no value, and a placeholder is found it just exits the masking function. Now someone can use <input v-mask="/\+1 \(\d{3}\) \d{4}-\d{2}/" placeholder="Home Phone Number">

    Also adds the example of using a placeholder and an example of using the mask to append text e.g. Append @domain.com onto the text being written.

    opened by ro-savage 1
  • Currency (float) mask

    Currency (float) mask

    Greetings,

    thanks for this nice package.

    I would be happy if you could help me write a mask that accepts integers or floats (not necessary with decimals). I need it to accept:

    1. whole numbers without dot (e.g.: 5)
    2. decimal numbers with single dot (e.g.: 1.23)

    I came up with something like /\d{1,3}\.\d{0,5}/ But this mask insists on the decimal point. I also tried with 2 different masks toggling based on the condition if the amount has a decimal point in it, but I had no luck.

    Thank you and regards

    opened by dekadentno 0
Owner
Looking for a job.
null
Input mask for React, Angular, Ember, Vue, & plain JavaScript

⚠️ This library is not maintained. Pull-requests and issues are not monitored. Alternatives to text-mask include: https://github.com/uNmAnNeR/imaskjs

Text Mask 8.2k Sep 30, 2022
🔡 Tiny input mask library for Vue.js (directive)

?? Tiny input mask library for Vue.js (directive)

Max Liashuk 824 Sep 24, 2022
Easy formatted numbers, currency and percentage with input/directive mask for Vue.js

vue-number-format Vue Number Format is used to format a number using fixed-point notation. It can be used to format a number with a specific number of

CodersTM 34 Sep 24, 2022
Tiny (2k gzipped) input/directive mask for currency

v-money Mask for Vue.js Features Lightweight (<2KB gzipped) Dependency free Mobile support Component or Directive flavors Accept copy/paste Editable F

Vue.js Tips 741 Sep 23, 2022
The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks.

The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks. You can use patterns like: <input type="text" v-ma

Wirecard Brasil 164 Aug 3, 2022
Vue.js component for jQuery mask plugin

Vue jQuery Mask Component Vue.js component for jQuery Mask Plugin Demo on JSFiddle Version matrix Vue.js version Package version Branch 2.x 1.x 1.x 3.

Ankur Kumar 19 Mar 4, 2022
Tiny (2k gzipped) and dependency free mask input for Vue.js

The Mask A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js Docs and Demo JsFiddle Install yarn add vue-the-mask o

Vue.js Tips 1.6k Sep 20, 2022
Simple zero-dependency input mask for Vue.js and vanilla JS.

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

Alexander Shabunevich 451 Oct 6, 2022
Vue.js directive to add inputmask library to your inputs (vanilla javascript).

vue-inputmask Vue.js directive to add a mask to your inputs (vanilla javascript). It's a binding for the inputmask library by Robin Herbots https://gi

Simon Cleriot 117 Jul 17, 2022
🛡 Vue directive to restrict an input by unicode values

v-unicode Vue directive to restrict an input by unicode values. It allows the input to be used just with the defined unicodes. It also sanitizes the v

Nicolas Del Valle 14 Sep 15, 2022