| Name | Type | Default |
|---|
|
disabled
|
Boolean
|
false
|
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>
|
|
height
|
Number | String
|
null
|
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>
|
|
mask
|
String
|
'#####'
|
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>
|
|
promptChar
|
String
|
"_"
|
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>
|
|
readOnly
|
Boolean
|
false
|
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>
|
|
rtl
|
Boolean
|
false
|
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>
|
|
theme
|
String
|
''
|
Sets the widget's theme.
<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>
|
|
textAlign
|
String
|
left
|
Sets or gets the text alignment.
Possible Values:
'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>
|
|
value
|
String | Number
|
null
|
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>
|
|
width
|
Number | String
|
null
|
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>
|
|
|
|
change
|
Event
|
|
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>
|
|
valueChanged
|
Event
|
|
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>
|
|
|
| Name | Arguments | Return Type |
|---|
|
clear
|
None
|
None
|
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>
|
|
destroy
|
None
|
None
|
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>
|
|
focus
|
None
|
None
|
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>
|
|
val
|
value
|
String
|
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>
|