Version: 1.x

Input

属性及支持度

H5	ReactNative	属性名	类型	默认值	说明
✔	✔	value	String		输入框的初始内容
✔	部分支持	type	String	'text'	input 的类型
✔	✔	password	Boolean	false	是否是密码类型
✔	✔	placeholder	String		输入框为空时占位符
	x	placeholderStyle	String		指定 placeholder 的样式
	x	placeholderClass	String	'input-placeholder'	指定 placeholder 的样式类
✔	✔	disabled	Boolean	false	是否禁用
✔	✔	maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
	x	cursorSpacing	Number	0	指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
	x	autoFocus	Boolean	false	(即将废弃，请直接使用 focus )自动聚焦，拉起键盘
✔	✔	focus	Boolean	false	获取焦点
	✔	confirmType	String	'done'	设置键盘右下角按钮的文字
	✔	cursor	Number		指定 focus 时的光标位置
	✔	selectionStart	Number	-1	光标起始位置，自动聚集时有效，需与 selection-end 搭配使用
	✔	selectionEnd	Number	-1	光标结束位置，自动聚集时有效，需与 selection-start 搭配使用
	x	adjustPosition	Boolean	true	键盘弹起时，是否自动上推页面
✔	✔	(onChange) onInput	EventHandle		当键盘输入时，触发 input 事件，处理函数可以直接 return 一个字符串，将替换输入框的内容。
✔	✔	(onFocus) onFocus	EventHandle		输入框聚焦时触发，height 参数在基础库 1.9.90 起支持
✔	✔	(onBlur) onBlur	EventHandle		输入框失去焦点时触发
	✔	onConfirm	EventHandle		点击完成按钮时触发。H5 版中目前需借用Form 组件的`onSubmit`事件来替代

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

示例：

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>
    )
  }
}

示例：​

示例：