Nativescript Input Mask

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

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

安装

tns plugin add nativescript-input-mask-viostec

用法

通过将一个 mask 属性添加到 InputMask 字段来使用。掩码可以即时更改，这会导致当前提取的值重新应用于新掩码。任何不符合掩码标准的字符将被丢弃。

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

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

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

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

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月