input

Weex 内置的 <input> 组件用来创建接收用户输入字符的输入组件。 <input> 组件的工作方式因 type 属性的值而异,比如 textpasswordurlemailtel 等。

此组件不支持 click 事件。请监听 inputchange 来代替 click 事件。

子组件

不支持子组件。

属性

key 类型 描述 默认值 备注
type string 控件的类型 text type 值可以是 text,date,datetime,email, password,tel,time,url,number 。每个 type 值都符合 W3C 标准。其中,date 和 time 会使用系统默认组件(Android + IOS)
value string 组件的默认内容 - -
placeholder string 提示用户可以输入什么。 提示文本不能有回车或换行 - -
autofocus boolean 布尔类型的数据,表示是否在页面加载时控件自动获得输入焦点 - -
maxlength nubmer 一个数值类型的值,表示输入的最大长度 - -
return-key-type string 键盘返回键的类型(即手机输入法右下角回车按钮的地方) - 支持 defalut;go;next;search;send,done
singleline only android & ios boolean 控制内容是否只允许单行 true -
max-length number 控制输入内容的最大长度 - 字符串长度,即中英文字符长度都为 1
max string 控制当 type 属性为 date 时选择日期的最大时间,格式为 yyyy-MM-dd - -
min string 控制当 type 属性为 date 时选择日期的最小时间,格式为 yyyy-MM-dd - -

样式

placeholder-color {color}
placeholder 字符颜色。默认值是 #999999

伪类

支持:

  • :active
  • :focus
  • :disabled
  • :enabled

通用样式

支持所有通用样式

  • 盒模型
  • flexbox 布局
  • position
  • opacity
  • background-color

事件

input 事件

当输入字符时触发。 事件中 event 对象有以下属性:

属性 说明 类型
value 当前组件的值 string
timestamp 事件发生时的时间戳,仅支持 Android。 string

change 事件

当用户输入完成时触发。通常在 blur 事件之后。事件中 event 对象有以下属性:

属性 说明 类型
value 当前组件的值 string
timestamp 事件发生时的时间戳,仅支持 Android。 string

focus 事件

组件获得输入焦点。事件中 event 对象有以下属性:

属性 说明 类型
timestamp 事件发生时的时间戳,仅支持 Android。 string

blur 事件

组件失去输入焦点。事件中 event 对象有以下属性:

属性 说明 类型
timestamp 事件发生时的时间戳,仅支持 Android。 string

return 事件

键盘点击返回键时触发。事件中 event 对象有以下属性:

属性 说明 类型
value 当前组件的值 string
returnKeyType 事件发生时的返回键类型 string

不支持 click 事件。 请监听 inputchange 事件代替。

支持以下通用事件:

  • longpress
  • appear
  • disappear

组件方法

focus()

input 组件聚焦。

blur()

input 组件中移除焦点并关闭软键盘(如果它具有焦点)。

setSelectionRange(selectionStart, selectionEnd)

设置文本选区

key 类型 描述
selectionStart number 设置文本选区的起始点
selectionEnd number 设置文本选区的起终点

getSelectionRange(function(params){})

获取文本选区

key 类型 描述
params.selectionStart number 文本选区的起始点
params.selectionEnd number 文本选区的起终点

setTextFormatter(params)

这是一个非常有用的特性,可以对 input 设置一组对输入的内容进行实时格式化的规则

key 类型 描述
params.formatRule regexp 格式化匹配的正则表达式
params.formatReplace regexp 格式化匹配后用于替换的内容
params.recoverRule regexp 从格式化后的内容还原原始内容的正则表达式
params.recoverReplace regexp 还原原始内容时用于替换的内容

约束

目前不支持 this.$el(id).value = '' 这种方式改写 input value。只支持在 <input> 组件的 input、change 事件中改写。

Last Updated: 7/15/2019, 3:54:51 PM