jQWidgets jqxMaskedInput 完整参考

概述

jQWidgets jqxMaskedInput 是一款基于 jQuery 和 jQWidgets 框架开发的控件，可以处理用户输入的数据并对其进行格式化。它通常用于输入日期、时间、电话号码等格式的数据。jQWidgets jqxMaskedInput 可以定制化掩码，支持多种数据类型的输入，具有响应式布局等优点。

特点

• 支持多种数据类型的输入：号码、时间、日期、货币等。
• 可定制化掩码，如：日期格式 (mm/dd/yyyy)，电话号码格式 (999-999-9999) 等。
• 支持用户自定义占位符。
• 多语言支持。
• 具有响应式布局。

使用示例

基本用法

<div id="maskedInput"></div>

<script>
    $(document).ready(function () {
        $('#maskedInput').jqxMaskedInput({ 
            mask: '00/00/0000'
        });
    });
</script>

以上代码中，我们定义了一个名为 maskedInput 的 div 元素，然后在 JavaScript 代码中以 jQuery 选择器选中该元素并调用了 jqxMaskedInput 方法。我们将 mask 属性设置为 '00/00/0000'，这意味着它将生成一个日期格式的输入控件。

自定义占位符

<div id="maskedInput"></div>

<script>
    $(document).ready(function () {
        $('#maskedInput').jqxMaskedInput({ 
            mask: '999-999-9999',
            promptChar: '*'
        });
    });
</script>

以上代码中，我们将 promptChar 属性设置为 ''，这意味着掩码中未输入的字符将以星号 () 显示。如：555-*48-1203。

多语言支持

<div id="maskedInput"></div>

<script>
    $(document).ready(function () {
        $('#maskedInput').jqxMaskedInput({ 
            mask: '00/00/0000',
            culture: 'fr-FR'
        });
    });
</script>

以上代码中，我们将 culture 属性设置为 'fr-FR'，以支持法语。

属性

| 属性 | 类型 | 描述 | | ----------- | ----------- | ----------- | | width | string/number | 控件宽度 | | height | string/number | 控件高度 | | mask | string | 定义掩码（格式） | | promptChar | string | 占位符 | | readOnly | bool | 是否只读 | | value | string | 控件初始值 | | textAlign | string | 对齐文本的方式 | | culture | string | 语言及文化设置 | | disabled | bool | 是否禁用 | | rtl | bool | 是否从右向左显示 |

方法

| 方法 | 描述 | | ----------- | ----------- | | clear() | 清空控件 | | destroy() | 销毁控件 | | focus() | 使输入控件获得焦点 | | val(value: string) | 设置或获取输入控件的值 |

事件

| 事件 | 描述 | | -- | -- | | valueChanged | 当控件的值发生改变时触发 |

总结

jQWidgets jqxMaskedInput 控件是一款优秀的数据输入格式化工具。它具有丰富的特性，可以用于多种类型的数据输入。开发者可以根据自己的需求，定制化掩码和占位符，并进行多语言支持。使用 jQWidgets jqxMaskedInput，可以改善用户输入数据的体验，提高数据的准确性和精确性。