behavior: masked-edit

此行为提供屏蔽输入编辑功能 - 由静态文本分隔的可编辑“孤岛”。

Elements

默认情况下，此行为应用于：

• <input type="masked">

• <input|masked>

• <input|date>/<caption> - 日期输入的标题子元素;

• <input|time>/<caption> - 时间输入的标题子元素;

Model

初始化后，输入包含以下结构：

<input|masked>
  <span>editable</span>
  separator
  <span>editable</span>
  separator
  ...
</input>

<span> 元素表示可编辑的文本，文本节点表示静态分隔符。

当前可编辑的跨度将具有 :current 状态标志。具有无效值（大于最大值或小于最小值）的数字范围由 :invalid 标志标记。

Attributes

• value="text" - 初始文本值;

• mask="mask" - 掩码的定义，即可能包含特殊字符的文本：

• \_ （下划线） - 允许在此位置输入任何字母数字字符;

• @ - 允许在此位置输入任何字母字符;

• # - 允许在此位置输入任何数字字符;

• 0 - 数字输入，该字段将在集合中填充为零;

• 蒙版中的所有其他字符将呈现为静态分隔符文本。

Methods

masked.selectGroup(group:int)

选择特定的编辑组。

masked.selectAll()

选择所有编辑组。

masked.getGroupValue(group:int | undefined):value

报告组的当前值。如果 group 为 undefined 返回当前组的值。该值可以是字符串、数字或未定义 - 具体取决于组类型。

masked.setGroupValue(group:int | undefined, value):bool

设置组的当前值。如果 group 未定义，则设置当前组的值。该值可以是字符串、数字 - 取决于组类型。将值设置为未定义 - 清除组值。

masked.groupType(group:int | undefined):string

组的报告类型。如果 group 为 undefined，则返回当前组的类型。可能的值：

• "_" - 字母数字文本;

•   "@" - 字母文本;

• "#" - 数字（整数）;

• "0" - 零填充的数字;

•   "|" -列举;

Properties

• masked.groupsCount:int - 只读，组数（可编辑字段）;

• masked.currentGroup:int - 读写，当前组号;

• masked.value:array - read-write， so called raw value - 组值数组.

• masked.mask - 读/写属性，字符串或定义数组;

  此属性允许“手动”定义屏蔽输入的结构，并具有更多控制权。

  掩码定义是字符串（呈现为静态分隔符）和对象的数组。每个对象都定义可编辑区域，并且可能具有以下字段：

• type: #integer | #text | #enum - 定义区域类型，必填;

• width: integer - 以字符为单位定义区域的长度，必填;

• class: string | symbol - 定义生成的 span 元素的 CSS 类，可选;

• min,max,step : integer - 定义 type：#integer 的最小/最大/步长值，可选;

• leading-zero : true | false - 如果为 true，则此 type：#integer 字段以零为前缀

• items:\["case1","case2",...\] - 定义类型可枚举事例列表： #enum - 此区域只允许输入那些预定义的事例。type：#enum 字段为必填项。

• filter: "a~z" - 定义此类型中允许的字符的过滤器：#text 字段，可选。:

Events

• "change" | "input" - 当值更改时发布。

• "statechange" - 当编辑器突出显示其他可编辑组时发布。

Value

是 string 或 array of values 当 mask 由 this.masked.mask = \[definitions\] call 定义时。

Examples

IP4地址输入字段声明：

<input|masked mask="000.000.000.000">

使用方面函数更精确地声明 IP4 地址输入字段进行初始化、标记：

<input|masked.ip4 mask="000.000.000.000">

 CSS系统：

input.ip4 { aspect:IP4 }

 脚本：

function IP4() {
 const ipmask = [
 { type:"integer", width:3, min:0, max:255, "leading-zero":true }, ".",
 { type:"integer", width:3, min:0, max:255, "leading-zero":true }, ".",
 { type:"integer", width:3, min:0, max:255, "leading-zero":true }, ".",
 { type:"integer", width:3, min:0, max:255, "leading-zero":true } ];
 this.masked.mask = ipmask; // initialization of fields and separators
}