INPUT 标签扩展

为了更方便的处理表单中的用户输入，标签库对 INPUT 标签进行了扩展。

使用

扩展属性

基本扩展或新增的属性有：

type 文本框的类型，除扩展了原生类型text、number和password外，还新增了integer、float、mobile、idcard和name。各扩展类型的应用在下面分别介绍。
autosize 是否根据输入的字符数自动调整宽度size，中文占用两个字符位置，如果设置了这个属性，则size属性表示最小宽度。
disabled 原生属性，现在值支持更多值，请参照布尔属性扩展。
enabled 扩展属性，与disabled相对应，但优先级低于disabled，请参照布尔属性扩展查看属性值设置。
enter 可以设定一个地址，当按下回车键时，自动跳转到指定的地址。如。如果只设置属性但不设置值，那么当按下回车时，则失去焦点触发onblur或onchange事件。
getter 在获取输入值时对值进行加工，返回加工后的值，下面有详细的解释。
if-empty 设置一个值，当输入值为空时，自动赋为这个值。如if-empty="60"，当输入值为空时，那么自动填充值为60。
minlength 最小字符长度，当不满足要求时提示invalid-text。小于等于0表示不限制最小长度。这个属性是原生属性。
set-{attr}-on 指定文本框的值或其他属性的更新条件，其中{attr}可以替换成组件支持的属性，例如set-value-on，下面有详细的示例。属性值规则见事件表达式。
setter 在设置输入值时对值进行加工，设置输入值为加工后的值，下面有详细的解释。
patternIgnoreCase 正则表达式验证器，区别于原生属性pattern，pattern是大小写敏感的，patternIgnoreCase不区分大小写，如pattern="^[a-z]$"只允许输入小写英文字母，而patternIgnoreCase="^[a-z]$"也可以输入大写字母。
validator 验证表达式，如validator="value != 'hello'"。支持关键字value，也可以使用this关键字，表示当前文本框。

与输入框样式相关的属性有：

class 默认的显示样式，必填项默认值为input-required-class，选填项默认值为input-optional-class。
error-class 当输入不正确时的样式，默认使用系统样式。
focus-class 当文本框获得焦点时的样式，默认使用系统样式。
valid-class 当输入正确时的样式，默认使用系统样式。

与输入和验证提示相关的属性有：

callout-position或callout 如果设置了这个属性，则提醒文字在 Callout 中显示，这个属性可以设置 Callout 的显示位置，可选值有 left、right、up、down，默认值为up。如果设置了callout-position属性而没有设置hint属性，则只用 Callout 的方式显示提醒；如果没有设置callout属性，则使用文本元素显示提醒文字；可以两种方式同时使用。
error-text-class 警告文字的样式，默认为红色。
exception-text 服务器端事件onchange+执行失败时的提示文字，一般为接口出错。如果不设置则提示接口的出错信息。
failure-text 服务器端事件onchange+执行成功并且结果验证未通过时的提示文字，如用户名重复等。
hint或hint-element 设置显示提醒文字的元素，值为 CSS 选择器，如#Message。如果不设置这个属性，则默认在文本框的后面创建一个 SPAN 元素。使用error-text-class和valid-text-class设置文字样式。可以多个 INPUT 使用同一个元素标签，比如只想在提交按钮后面显示提醒。
invalid-text 当输入值不满足验证要求时的提示文字。
message-duration或message 在 Message 中显示提示信息，Message 会显示在页面上方，这个属性值为数字，表示提示显示几秒，默认值为0，表示一直显示直到被点击才消失。
required-text 当输入值为空时的提示文字。
success-text 服务器端事件onchange+执行成功并且结果验证通过时的提示文字，如检查用户名唯一等。
valid-text 当输入值正确时的提示文字，不设置则不显示。
valid-text-class 输入正确时的提醒文字的样式，默认为绿色，需设置valid-text才显示。

以上以-text结尾的提醒文本属性均支持 Express 表达式。

特有 type 类型的属性有：

fit 设置一个密码输入框的 id，适用于第二个password，用于检查两次输入的密码是否一致。如#Password。
max 原生属性，设置允许的最大值，适用于number、integer和float类型。
min 原生属性，设置允许的最小值，适用于number、integer和float类型。
options 仅适用于checkbox和switch类型，指定复选框或切换按钮在两种状态下的值，例如yes,no、1,0等。
pad 是否在小数点后不满足精度要求时自动补0，如精度为4时，值为1.34，则会自动修正为1.3400，适用于number和float类型。
positive 是否只允许输入正值，适用于number、float和integer类型，设置为true或其他可识别为true的值时，只允许输入正值。
precision 小数点的精度，适用于number和float类型，为0时即控制为整数。
strength 密码复杂度，可选值 WEAK、STRONG和COMPLEX，适用于password类型，用于密码强度控制。
theme 仅适用于switch类型，指定切换按钮的主题，默认值switch，可选值checkbox和whether。

其他原生属性请参照 INPUT 标签。

扩展方法

方法可用于事件表达式中。

reset() 重置为默认值。
empty() 清空。
copy() 复制文本框中的值。
set(attr, value) 设置某个属性attr的值为value。
update(value) 更新输入框的值为value。
check(checked = true) 设置复选框的选中或不选中。
uncheck() 取消选中指定复选框。
incheck() 半选中复选框，in是indeterminate的缩写。
tocheck() 切换复选框的选中状态，to是toggle的缩写。

扩展事件

扩展事件建议像属性一样在标签上定义。

onchange+ 服务器端事件，接受一个接口地址或 PQL 查询语句（不一定是 SELECT），检查输入值是否符合预期，如检查用户名是否唯一。详见服务器端事件，属性格式见与数据相关的属性和 Express 字符串。
onchange-checked 当改变到选中状态时触发的事件，适用于switch和checkbox类型。
onchange-unchecked 当改变到未选中状态时触发的事件，适用于switch和checkbox类型。
onload 实现了原生未实现的事件，当文本框加载后触发。
onmodify 新增的事件，当且仅当用户输入的值改变时触发。类似于oninput，但对触发频率做了限制。
onkeyenter 在输入状态下，按下回车键触发。

所有原生事件依然可用，如onchange、onblur等。

文本 type="text"

以下文本框只能输入英文字符：

示例代码为：

数字 type="number"

number 类型是 Html 的原生属性，只允许用户在输入框中输入数字，并且提供上下箭头以进行快速设置。root.js 对number类型的改变主要包括：

不再支持科学计数法，e和+不再允许输入。
只能在第一个字符输入-。
可以通过positive属性控制只能输入正数。
可以通过precision属性设置精度，当失去焦点时自动进行精度检查，四舍五入。当precision设置为0时，只能设置整数。
可以通过pad属性设置当精度不够时，自动在小数后补0，如精度为4时，1.34自动转化为1.3400，2自动转化为2.0000。
可以通过min和max属性对输入值进行限制，当输入值不满足要求时，会自动提示invalid-text。

运行效果为：

正整数：精度为4：

number类型maxlength不可用，所有不能用来限制用户输入的长度，如果希望用maxlength来控制用户输入，请使用integer或float类型。原生属性step用来控制箭头按钮的步长。

整数 type="integer"

integer 是扩展类型，只允许在输入框中输入整数和0，不像number提供上下箭头用来快速设置。其他与number相同。

运行效果为：

可以通过maxlength设置允许用户可输入的最大字符数。

小数 type="float"

float 也是扩展类型，除不提供上下箭头用来快速设置和支持maxlength外，其他均与number相同。

运行效果为：

密码 type="password"

password是原生类型，root.js 对password的扩展主要是增加了strength属性，用来设置密码强度，可选值有WEAK，STRONG，COMPLEX。

WEAK 密码位数不受限制，字符类型不受限制，默认值。
STRONG 密码至少6位，必须包含英文字母和数字。
COMPLEX 密码至少8位，必须包含大写、小写英文字母、数字和符号。

当输入密码强度不满足要求时，显示invalid-text提示。

运行效果为：

确认密码 fit="#Password"

这个属性用来检查两次输入密码的是否一致，属性值为第一次密码输入框的 id。

运行效果为：

　　请输入密码：
请再次输入密码：

注意fit属性中的#不能省略，可理解为是一个 CSS 选择器。另外也使用invalid-text提示不匹配。

手机号 type="mobile"

mobile是扩展类型，允许输入 11 位手机号码，且第 1 位必须是1，第 2 位必须是3到9。文本框中只允许输入数字。

运行效果为：

身份证号 type="idcard"

idcard也是扩展类型，允许输入18位身份证号码，除最后一位允许为X外，其他 17 位只能输入数字。

运行效果为：

姓名 type="name"

name也是扩展类型，至少输入两个字符。

运行效果为：

复选框

checkbox是原生类型，可使用options来设定选中和未选中状态下的值，也可以使用onchange+事件在状态切换时与服务器端交互。

切换按钮

switch是扩展类型，这个类型表现为一个切换按钮，按钮有两种状态，开启状态和关闭状态，点击时在两种状态之是切换。可以理解为是复选框的图片版本。可使用theme设置按钮的样式。

进一步对值进行检查

有时即使输入值符合要求，也要进一步对值进行检查，以判断是否符合系统要求，比如用户名唯一检查。使用onchange事件（当值改变时且失去焦点）触发。

运行效果为：

上例中，用户名master已经在系统中，{value}表示获取当前文本框的值。当文本框失去焦点时，会自动执行onchange+事件，并判断返回值是否为空。当返回值不为空，即用户名已经存在时，会提示failure-text属性中的文字，否则提示success-text中的文字。

其他组件触发更新

通过标签的set-{attr}-on属性，可以设置一个事件表达式，当表达式中的组件触发相应的事件时，更新文本框的值或其他属性。值格式设置见 Express 字符串。

上例中，当文本框加载后和选择框Select1改变选项时，文本框的value自动更新，上式中的this指向当前文本框。当选择框Select2选项改变时，文本框的size属性自动更新。

对输入值进行拦截

getter和setter属性可以实现拦截器的功能，当获取或设置value属性的值时，对值进行加工，并返回加工后的值。这两个属性的属性值是一个 Javascript 短句，因为输入值是一个字符串，所以一般是字符串操作方法，使用value表示当前文本框的值。

上例中，当获取文本框的值时，会执行getter属性内的逻辑，自动将输入值去掉所有空白字符。当设置文本框的值时，会执行setter属性的逻辑，自动去掉输入值两端的空白字符。

可用的选择器

可使用原生选择器获取或设置文本框的值，例如$s('#TextBox1').value。

其他扩展属性

除了可在在标签中定义的扩展属性之外，还有几个可用的扩展属性，这些属性不能在标签中定义。

$required 是否是必填项，区别于原生的required属性，这个会根据已设置的扩展属性进行判断。
hintText 获取或设置提醒文字。
status 获取文本框的状态，分别有几个枚举值：-1输入值无效，0输入值为空，1输入值有效，2空值初始状态，3有值初始状态，另外一个不常用值为-2表示值有效但是不符合预期。文本框状态在其他组件中使用。

参考链接