介绍
本身是一个weex的内置组件,提供单行输入能力,用于接收用户输入字符,常用于表单项。
图示
代码演示
基础样式、事件实现
<input
ref="input"
class="input"
value="输入框文本"
:placeholder="占位文本"
:type="text"
:disabled="false"
:maxlength="100"
returnKeyType="done"
:autofocus="true"
@input="onInput"
@change="onChange"
@focus="onFocus"
@blur="onBlur"
@return="onReturn"
@keyboard="onKeyboard"
/>
.input {
placeholder-color: #333333;
}
方法调用
// 获得焦点
this.$refs.input.focus()
// 失去焦点
this.$refs.input.blur()
// 设置文本选中
this.$refs.input.setSelectionRange(2, 5)
// 读取选中区间
this.$refs.input.getSelectionRange((params) => {
console.log(`返回值:${JSON.stringify(params)}`)
})
// 返回值:{"selectionStart":2,"selectionEnd":5}
// 设置输入内容格式化
this.$refs.input.setTextFormatter({
formatRule: '/[0-9]/g',
formatReplace: 'a',
recoverRule: '/[^0-9]/g',
recoverReplace: 'b',
})
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 键盘样式,可选值如下 | string | text |
text 键盘为普通文本格式 | |||
email 键盘为带@的快捷样式 | |||
password 输入内容会变成圆点 | |||
tel 键盘为数字和#*-的快捷样式 | |||
url 键盘为带.com的快捷样式 | |||
number 键盘为数字和.的快捷样式 | |||
value | 输入框的默认内容 | string | - |
v-modal | 默认支持v-modal | ||
placeholder | 占位文案 | string | - |
autofocus | 表示是否在页面加载时控件自动获得输入焦点 | boolean | - |
maxlength | 可输入内容的最大长度 | number | - |
return-key-type | 键盘返回键的类型,支持 defalut;go;next;search;send,done | string | - |
disabled | 禁用 | boolean | false |
allowCopyPaste | 是否支持双击进行复制、剪切、全选等操作 | boolean | false |
hideDoneButton | 隐藏键盘上面的完成栏,只支持ios | boolean | false |
upriseOffsetv | 当键盘弹起可能盖住输入框时,页面整体会上移。这个属性指定键盘上边缘与输入框下边缘的间隙。使用 iOS 系统坐标,默认是 20,只支持ios | number | 20 |
formatPattern | 格式化输入内容(详情见扩展) | string | “” |
注:以下api或值不建议使用
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | date、time、datetime值不建议使用,在ios14上未做适配,会导致问题 | string | |
singleline | 控制内容是否只允许单行(实测没什么用) | boolean | true |
max | 控制当 type 属性为 date 时选择日期的最大时间,格式为 yyyy-MM-dd (不太好用) | string | - |
min | 控制当 type 属性为 date 时选择日期的最小时间,格式为 yyyy-MM-dd(不太好用) | string | - |
样式
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
通用样式 | Weex-通用样式 | ||
placeholderColor | placeholder 字符颜色 | string | #999999 |
事件
名称 | 说明 | 回调参数 | 参数说明 |
---|---|---|---|
通用事件 | Weex-通用事件 | ||
input | 用户输入时,会不断触发 | value | 当前文本 |
change | 用户输入结束且文本有改变时触发 | value | 当前文本 |
focus | 输入框获得焦点时触发 | - | |
blur | 输入框失去焦点时触发 | - | |
return | 用户点击了“回车”按钮时触发 | value | 当前文本 |
returnKeyType | 返回按钮类型:”default” | “go” | “next” | “search” | “send” | “done” | ||
keyboard | 键盘弹起或收起时触发 | isShow | 键盘是否显示 |
keyboardSize | 键盘的尺寸,以前端使用的样式单位返回 |
注:支持除click事件以外的所有通用事件,如果只实现了click事件,会无法触发输入框获取焦点。
方法
事件名 | 参数 | 说明 |
---|---|---|
focus | - | 让输入框获得焦点 |
blur | - | 让输入框失去焦点并关闭键盘 |
setSelectionRange | selectionStart,numbe,文本选中区域起始位 selectionEnd,number,文本选中区域结束位 |
设置文本选中区域 |
getSelectionRange | callback:function,参数同上 | 获取文本选中区域 |
setTextFormatter | formatRule,regexp,格式化匹配的正则表达式 formatReplace,regexp,格式化匹配后用于替换的内容 recoverRule,regexp,从格式化后的内容还原原始内容的正则表达式 recoverReplace,regexp,还原原始内容时用于替换的内容 |
用于输入内容的格式化 |