Vue UI Components Documentation

Sets or gets whether the widget is disabled.

<template>
  <JqxMaskedInput ref="myMaskedInput"
    :width="250" :value="'1000'" :disabled="true"
  />
</template>
 
<script>
  import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
 
  export default {
    components: {
      JqxMaskedInput
    }
  }
</script>

Sets or gets height of the masked input in pixels.

<template>
  <JqxMaskedInput ref="myMaskedInput"
    :width="250" :value="'1000'" :height="30"
  />
</template>
 
<script>
  import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
 
  export default {
    components: {
      JqxMaskedInput
    }
  }
</script>

Sets or gets the masked input's mask.

• # - For digit character. Accepts values from 0 to 9
• 9 - For digit character. Accepts values from 0 to 9
• 0 - For digit character. Accepts values from 0 to 9
• A - For alpha numeric character. Accepts values from 0 to 9 and from a to z and A to Z.
• L - For alpha character. Accepts values from a to z and A to Z
• [abcd] - For character set. Matches any one of the enclosed characters. You can specify a range of characters by using a hyphen. For example, [abcd] is the same as [a-d]. Examples: [0-5] - accepts values from 0 to 5. [ab] - accepts only a or b.

<template>
  <JqxMaskedInput ref="myMaskedInput"
    :width="250" :value="'1000'" :mask="'###-##-####'"
  />
</template>
 
<script>
  import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
 
  export default {
    components: {
      JqxMaskedInput
    }
  }
</script>

Sets or gets the prompt char displayed when an editable char is empty.

<template>
  <JqxMaskedInput ref="myMaskedInput"
    :width="250" :value="'1000'" :promptChar="'#'"
  />
</template>
 
<script>
  import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
 
  export default {
    components: {
      JqxMaskedInput
    }
  }
</script>

Sets or gets the readOnly state of the input.

<template>
  <JqxMaskedInput ref="myMaskedInput"
    :width="250" :value="'1000'" :readOnly="true"
  />
</template>
 
<script>
  import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
 
  export default {
    components: {
      JqxMaskedInput
    }
  }
</script>

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxMaskedInput ref="myMaskedInput"
    :width="250" :value="'1000'" :rtl="true"
  />
</template>
 
<script>
  import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
 
  export default {
    components: {
      JqxMaskedInput
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxMaskedInput ref="myMaskedInput"
    :width="250" :value="'1000'" :theme="'material'"
  />
</template>
 
<script>
  import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
 
  export default {
    components: {
      JqxMaskedInput
    }
  }
</script>

Sets or gets the text alignment.

'right'

'left'

<template>
  <JqxMaskedInput ref="myMaskedInput"
    :width="250" :value="'1000'" :textAlign="'right'"
  />
</template>
 
<script>
  import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
 
  export default {
    components: {
      JqxMaskedInput
    }
  }
</script>

Sets or gets the masked input's value.

<template>
  <JqxMaskedInput ref="myMaskedInput"
    :width="250" :value="'1000'"
  />
</template>
 
<script>
  import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
 
  export default {
    components: {
      JqxMaskedInput
    }
  }
</script>

Sets or gets width of the masked input in pixels. Only positive values have effect.

<template>
  <JqxMaskedInput ref="myMaskedInput"
    :width="250" :value="'1000'"
  />
</template>
 
<script>
  import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
 
  export default {
    components: {
      JqxMaskedInput
    }
  }
</script>

This event is triggered when the value is changed and the control's focus is lost.

Code examples

Bind to the change event of jqxMaskedInput.

<template>
  <JqxMaskedInput ref="myMaskedInput" @change="onChange($event)"
    :width="250" :value="'1000'"
  />
</template>
 
<script>
  import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
 
  export default {
    components: {
      JqxMaskedInput
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event of jqxMaskedInput.

<template>
  <JqxMaskedInput ref="myMaskedInput" @valueChanged="onValueChanged($event)"
    :width="250" :value="'1000'"
  />
</template>
 
<script>
  import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
 
  export default {
    components: {
      JqxMaskedInput
    },
    methods: {
      onValueChanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Clears the value.

<template>
  <JqxMaskedInput ref="myMaskedInput"
    :width="250" :value="'1000'"
  />
</template>
 
<script>
  import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
 
  export default {
    components: {
      JqxMaskedInput
    },
    mounted: function () {
      this.$refs.myMaskedInput.clear();
    }
  }
</script>

Destroys the widget.

<template>
  <JqxMaskedInput ref="myMaskedInput"
    :width="250" :value="'1000'"
  />
</template>
 
<script>
  import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
 
  export default {
    components: {
      JqxMaskedInput
    },
    mounted: function () {
      this.$refs.myMaskedInput.destroy();
    }
  }
</script>

Focuses the widget.

<template>
  <JqxMaskedInput ref="myMaskedInput"
    :width="250" :value="'1000'"
  />
</template>
 
<script>
  import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
 
  export default {
    components: {
      JqxMaskedInput
    },
    mounted: function () {
      this.$refs.myMaskedInput.focus();
    }
  }
</script>

Sets or gets the value.

<template>
  <JqxMaskedInput ref="myMaskedInput"
    :width="250" :value="'1000'"
  />
</template>
 
<script>
  import JqxMaskedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmaskedinput.vue';
 
  export default {
    components: {
      JqxMaskedInput
    },
    mounted: function () {
      const value = this.$refs.myMaskedInput.val();
    }
  }
</script>