跳到主要内容
版本:1.x

Input

属性及支持度

H5ReactNative属性名类型默认值说明
valueString输入框的初始内容
部分支持typeString'text'input 的类型
passwordBooleanfalse是否是密码类型
placeholderString输入框为空时占位符
xplaceholderStyleString指定 placeholder 的样式
xplaceholderClassString'input-placeholder'指定 placeholder 的样式类
disabledBooleanfalse是否禁用
maxlengthNumber140最大输入长度,设置为 -1 的时候不限制最大长度
xcursorSpacingNumber0指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
xautoFocusBooleanfalse(即将废弃,请直接使用 focus )自动聚焦,拉起键盘
focusBooleanfalse获取焦点
confirmTypeString'done'设置键盘右下角按钮的文字
cursorNumber指定 focus 时的光标位置
selectionStartNumber-1光标起始位置,自动聚集时有效,需与 selection-end 搭配使用
selectionEndNumber-1光标结束位置,自动聚集时有效,需与 selection-start 搭配使用
xadjustPositionBooleantrue键盘弹起时,是否自动上推页面
(onChange) onInputEventHandle当键盘输入时,触发 input 事件,处理函数可以直接 return 一个字符串,将替换输入框的内容。
(onFocus) onFocusEventHandle输入框聚焦时触发,height 参数在基础库 1.9.90 起支持
(onBlur) onBlurEventHandle输入框失去焦点时触发
onConfirmEventHandle点击完成按钮时触发。H5 版中目前需借用Form 组件onSubmit事件来替代

其他相关属性请看各小程序官方文档

微信小程序 Input

百度小程序 Input

支付宝小程序 Input

抖音小程序 Input

示例:
import Taro, { Component } from '@tarojs/taro'
// 引入 Form 组件
import { View, Input, Text } from '@tarojs/components'

class App extends Component {

render () {
return (
<View className='example-body'>
<Text>可以自动聚焦的 input</Text>
<Input type='text' placeholder='将会获取焦点' focus/>
<Text>控制最大输入长度的 input</Text>
<Input type='text' placeholder='最大输入长度为 10' maxlength='10'/>
<Text>数字输入的 input</Text>
<Input type='number' placeholder='这是一个数字输入框'/>
<Text>密码输入的 input</Text>
<Input type='password' password placeholder='这是一个密码输入框'/>
<Text>带小数点的 input</Text>
<Input type='digit' placeholder='带小数点的数字键盘'/>
<Text>身份证输入的 input</Text>
<Input type='idcard' placeholder='身份证输入键盘'/>
<Text>控制占位符颜色的 input</Text>
<Input type='text' placeholder='占位符字体是红色的' placeholderStyle='color:red'/>
</View>
)
}
}