Warning: session_start(): open(/var/lib/php/fpm/session/sess_d4mmmor8cjh9ajeqnkj6fbgdi4, O_RDWR) failed: Permission denied (13) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Warning: session_start(): Failed to read session data: files (path: /var/lib/php/fpm/session) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Notice: Undefined index: HTTP_REFERER in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Vue Input Mask Directive - Bootstrap 4 & Material Design - Material Design for Bootstrap

Vue Bootstrap Input Mask MDB Pro component

Vue Input Mask - Bootstrap 4 & Material Design

The mdb-input-mask is a custom directive which allows to set a predefined format of forms.

Live Preview

Basic usage

Step 1: Import the directive from 'mdbvue'


        <script>
          import { mdbInputMask } from "mdbvue";
        </script>
      

Step 2: Add mdbInputMask to the directives object


        <script>
          import { mdbInputMask } from "mdbvue";
          export default {
            directives: {
              mdbInputMask
            }
          };
        </script>
      

Step 3: Attach the directive to input or input's wrapper for setting a predefined format.


        <template>
          <mdb-input v-mdb-input-mask="'♠♠♠♠♠♠♠♠♠♠'" v-model="value" placeholder="♠♠♠♠♠♠♠♠♠♠" />
        </template>
      

        <script>
          import { mdbInput, mdbInputMask } from "mdbvue";
          export default {
            data() {
              return {
                value: ''
              }
            },
            components: {
              mdbInput
            },
            directives: {
              mdbInputMask
            }
          };
        </script>
      

Options

Name Type Description Example
String Allows only numbers <input v-mdb-input-mask="'♠'" />
String Allows only letters <input v-mdb-input-mask="'♣'" />
String Allows only numbers and letters <input v-mdb-input-mask="'♥'" />
String Allows any digit <input v-mdb-input-mask="'♦'" />