Nativescript 输入掩码

格式化用户输入并仅处理对应用程序有价值的字符。使用此插件以更友好的方式格式化电话号码、信用卡号码等。

此插件使原生库 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 月