title: Input

sidebar_label: Input

输入框。该组件是原生组件,使用时请注意相关限制

参考文档

类型

  1. ComponentType<InputProps>

示例代码

  1. class App extends Component {
  2. render () {
  3. return (
  4. <View className='example-body'>
  5. <Text>可以自动聚焦的 input</Text>
  6. <Input type='text' placeholder='将会获取焦点' focus/>
  7. <Text>控制最大输入长度的 input</Text>
  8. <Input type='text' placeholder='最大输入长度为 10' maxlength='10'/>
  9. <Text>数字输入的 input</Text>
  10. <Input type='number' placeholder='这是一个数字输入框'/>
  11. <Text>密码输入的 input</Text>
  12. <Input type='password' password placeholder='这是一个密码输入框'/>
  13. <Text>带小数点的 input</Text>
  14. <Input type='digit' placeholder='带小数点的数字键盘'/>
  15. <Text>身份证输入的 input</Text>
  16. <Input type='idcard' placeholder='身份证输入键盘'/>
  17. <Text>控制占位符颜色的 input</Text>
  18. <Input type='text' placeholder='占位符字体是红色的' placeholderStyle='color:red'/>
  19. </View>
  20. )
  21. }
  22. }

InputProps

参数 类型 默认值 必填 说明
value string 输入框的初始内容
type "number" | "text" | "idcard" | "digit" "text" input 的类型
password boolean 是否是密码类型
placeholder string 输入框为空时占位符
placeholderStyle string 指定 placeholder 的样式
placeholderClass string "input-placeholder" 指定 placeholder 的样式类
disabled boolean 是否禁用
maxlength number 140 最大输入长度,设置为 -1 的时候不限制最大长度
cursorSpacing number 0 指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
autoFocus boolean false (即将废弃,请直接使用 focus )自动聚焦,拉起键盘
focus boolean 获取焦点
confirmType "send" | "search" | "next" | "go" | "done" done 设置键盘右下角按钮的文字
confirmHold boolean false 点击键盘右下角按钮时是否保持键盘不收起
cursor number 指定focus时的光标位置
selectionStart number -1 光标起始位置,自动聚集时有效,需与selection-end搭配使用
selectionEnd number -1 光标结束位置,自动聚集时有效,需与selection-start搭配使用
adjustPosition boolean false 键盘弹起时,是否自动上推页面
holdKeyboard boolean false focus 时,点击页面的时候不收起键盘
onInput BaseEventOrigFunction<inputEventDetail> 当键盘输入时,触发input事件,event.detail = {{value, cursor, keyCode}},处理函数可以直接 return 一个字符串,将替换输入框的内容。
onFocus BaseEventOrigFunction<inputForceEventDetail> 输入框聚焦时触发,event.detail = {{ value, height }},height 为键盘高度
onBlur BaseEventOrigFunction<inputValueEventDetail> 输入框失去焦点时触发

event.detail = {{value: value}}
onConfirm BaseEventOrigFunction<inputValueEventDetail> 点击完成按钮时触发

event.detail = {{value: value}}
onKeyboardHeightChange BaseEventOrigFunction<onKeyboardHeightChangeEventDetail> 键盘高度发生变化的时候触发此事件

event.detail = {{height: height, duration: duration}}

API 支持度

API 微信小程序 H5 React Native
InputProps.value ✔️ ✔️ ✔️
InputProps.type ✔️ ✔️ ✔️(部分支持)
InputProps.password ✔️ ✔️ ✔️
InputProps.placeholder ✔️ ✔️ ✔️
InputProps.placeholderStyle ✔️
InputProps.placeholderClass ✔️
InputProps.disabled ✔️ ✔️ ✔️
InputProps.maxlength ✔️ ✔️ ✔️
InputProps.cursorSpacing ✔️
InputProps.autoFocus ✔️
InputProps.focus ✔️ ✔️ ✔️
InputProps.confirmType ✔️ ✔️
InputProps.confirmHold ✔️
InputProps.cursor ✔️ ✔️
InputProps.selectionStart ✔️ ✔️
InputProps.selectionEnd ✔️ ✔️
InputProps.adjustPosition ✔️
InputProps.holdKeyboard ✔️
InputProps.onInput ✔️ ✔️ ✔️
InputProps.onFocus ✔️ ✔️ ✔️
InputProps.onBlur ✔️ ✔️ ✔️
InputProps.onConfirm ✔️ (借用Form 组件onSubmit事件来替代) ✔️
InputProps.onKeyboardHeightChange ✔️

inputEventDetail

参数 类型 说明
value string 输入值
cursor number 光标位置
keyCode number 键值

inputForceEventDetail

参数 类型 说明
value string 输入值
height number 键盘高度

inputValueEventDetail

参数 类型 说明
value string 输入值

onKeyboardHeightChangeEventDetail

参数 类型 说明
height number 键盘高度
duration number 持续时间

API 支持度

API 微信小程序 H5 React Native
Input ✔️ ✔️ ✔️