@nstudio/nativescript-input-mask

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

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

安装

npm install @nstudio/nativescript-input-mask

如果您之前使用的是 0.1.x 版本，请注意 1.0.0 版本中的以下破坏性更改

• 已删除属性 extractedValue。属性文本将从此保持该值。
• 添加了 maskedValue 属性以检索具有掩码格式的值。

使用

通过向 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 { registerElement } from '@nativescript/angular';
import { InputMask } from '@nstudio/nativescript-input-mask';

registerElement('InputMask', () => InputMask);

使用具有掩码属性和其他事件属性的 TextField

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

@Component({
	selector: 'ns-app',
	template: `
		<StackLayout>
			<InputMask mask="([000]) [000]-[0000]" text="1235551111" (maskedValueChange)="onMaskedValueChange($event)" (completedChange)="onCompletedChage($event)"> </InputMask>
		</StackLayout>
	`,
})
export class AppComponent {
	onMaskedValueChange(args) {
		// e.g. `(123) 555-1111`
		console.log('Masked value:', args.value);
	}

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

请注意，掩码可以即时绑定和更改。请参阅演示应用程序以查看工作实现。

API

InputMask类继承自TextField并实现了以下附加属性

许可

Apache License Version 2.0, January 2004