Nativescript Input Mask

格式化用户输入，只处理应用程序有价值的字符。使用此插件以更友好的方式格式化电话号码、信用卡号码等，以便于数据处理过程。

此插件使原生库 InputMask(Android) 和 InputMask(iOS) 与 Nativescript 兼容。

安装

tns plugin add nativescript-input-mask

用法

通过向 InputMask 字段添加 mask 属性来使用。掩码可以随时更改，这将导致当前提取的值重新应用于新掩码。任何不符合掩码条件的字符将被删除。

以下为掩码文档（来自 此处）。

掩码由符号块组成，可能包括

• [] — 用户写入的有价值符号的块。

方括号块可以包含任意数量的特殊符号

1. 0 — 必要数字。例如，[000] 掩码将允许用户输入三个数字：123。
2. 9 — 可选数字。例如，[00099] 掩码将允许用户输入三个到五个数字。
3. А — 必要字母。 [AAA] 掩码将允许用户输入三个字母：abc。
4. а — 可选字母。 [АААааа] 掩码将允许输入三个到六个字母。
5. _ — 必要符号（数字或字母）。
6. - — 可选符号（数字或字母）。

方括号内的其他符号将导致掩码初始化错误。

块可以包含混合类型的符号；例如，[000AA] 将最终分为两个组：[000][AA]（这会自动发生）。

块不得包含嵌套括号。 [[00]000] 格式将导致掩码初始化错误。

方括号外的符号将出现在输出中。例如，+7 ([000]) [000]-[0000] 掩码将格式化输入字段为 +7 (123) 456-7890。

• {} — 用于有价值且固定不变的符号的块，用户无法更改。

方括号和花括号内的符号组成提取值（有价值字符）。换句话说，[00]-[00] 和 [00]{-}[00] 将格式化输入为相同的 12-34 形式，但在第一种情况下，库提取的值等于 1234，在第二种情况下，结果为 12-34。

掩码格式示例

1. [00000000000]
2. {401}-[000]-[00]-[00]
3. [000999999]
4. {818}-[000]-[00]-[00]
5. [A][-----------------------------------------------------]
6. [A][_______________________________________________________________]
7. 8 [0000000000]
8. 8([000])[000]-[00]-[00]
9. [0000]{-}[00]
10. +1 ([000]) [000] [00] [00]

Angular

将以下行添加到 app/app.module.ts

import { InputMaskModule } from 'nativescript-input-mask/angular';

@NgModule({
    // ...
    imports: [
        // ...
        InputMaskModule,
        // ...
    ],
    // ...
})

像使用带掩码属性和其他事件属性的 TextField 一样使用

import { Component, NgZone, OnInit } from "@angular/core";

@Component({
  selector: "ns-app",
  template: `
    <StackLayout>
        <InputMask
            mask="([000]) [000]-[0000]"
            (extractedValueChange)=onExtractedValueChange($event)
            (completedChange)="onCompletedChage($event)">
        </InputMask>
    </StackLayout>
  `,
})
export class AppComponent {
    onExtractedValueChange(args) {
        // `args.value` includes only extracted characters, for instance
        // `1235551111` would be logged while the UI would display `(123) 555-1111`.
        console.log('Extracted value:', args.value);
    }

    onCompletedChange(args) {
        // `args.value` indicates whether the field contains all mandatory characters.
        console.log('Completed:', args.value)
    }
}

请注意，掩码可以绑定并在运行时更改。请参阅示例应用程序以获取有效实现。

API

InputMask 类扩展 TextField 并实现以下附加属性

许可证

Apache许可证版本2.0，2004年1月