Input 输入框

用于接受单行文本，支持文本、密码、数字、手机号码、银行卡等类型的输入。

用户可控制是否显示输入框标题，是否出现清除按钮，输入框状态，还可以自定义 Input 组件的右边栏，实现自定义按钮、验证码输入框等。

使用指南

在 Taro 文件中引入组件

:::demo

  1. import { AtInput, AtForm } from 'taro-ui'

:::

一般用法

:::demo

  1. <AtInput
  2.   name='value'
  3.   title='标准五个字'
  4.   type='text'
  5.   placeholder='标准五个字'
  6.   value={this.state.value}
  7.   onChange={this.handleChange}
  8. />

:::

不同输入框类型

:::demo

  1. <AtForm>
  2.   <AtInput
  3.     name='value1'
  4.     title='文本'
  5.     type='text'
  6.     placeholder='单行文本'
  7.     value={this.state.value1}
  8.     onChange={this.handleChange}
  9.   />
  10.   <AtInput
  11.     name='value2'
  12.     title='数字'
  13.     type='number'
  14.     placeholder='请输入数字'
  15.     value={this.state.value2}
  16.     onChange={this.handleChange}
  17.   />
  18.   <AtInput
  19.     name='value3'
  20.     title='密码'
  21.     type='password'
  22.     placeholder='密码不能少于10位数'
  23.     value={this.state.value3}
  24.     onChange={this.handleChange}
  25.   />
  26.   <AtInput
  27.     name='value4'
  28.     title='身份证'
  29.     type='idcard'
  30.     placeholder='身份证号码'
  31.     value={this.state.value4}
  32.     onChange={this.handleChange}
  33.   />
  34.   <AtInput
  35.     name='value5'
  36.     title='小数'
  37.     type='digit'
  38.     placeholder='请输入小数'
  39.     value={this.state.value5}
  40.     onChange={this.handleChange}
  41.   />
  42.   <AtInput
  43.     name='value6'
  44.     border={false}
  45.     title='手机号码'
  46.     type='phone'
  47.     placeholder='手机号码'
  48.     value={this.state.value6}
  49.     onChange={this.handleChange}
  50.   />
  51. </AtForm>

:::

不同状态

:::demo

  1. <AtForm>
  2.   <AtInput
  3.     disabled
  4.     title='禁用'
  5.     type='text'
  6.     placeholder='禁止输入'
  7.     value={this.state.value1}
  8.     onChange={this.handleChange}
  9.   />
  10.   <AtInput
  11.     error
  12.     title='出现错误'
  13.     type='text'
  14.     placeholder='点击按钮触发回调'
  15.     value={this.state.value2}
  16.     onChange={this.handleChange}
  17.     onErrorClick={this.handleClick}
  18.   />
  19.   <AtInput
  20.     editable={false}
  21.     title='不可编辑'
  22.     type='text'
  23.     placeholder='不可编辑'
  24.     value={this.state.value3}
  25.     onChange={this.handleChange}
  26.   />
  27.   <AtInput
  28.     clear
  29.     border={false}
  30.     title='清除按钮'
  31.     placeholder='点击清除按钮清空内容'
  32.     type='text'
  33.     value={this.state.value4}
  34.     onChange={this.handleChange}
  35.   />
  36. </AtForm>

:::

自定义右边栏

:::demo

  2. <AtInput
  3.   clear
  4.   title='验证码'
  5.   type='text'
  6.   maxlength='4'
  7.   placeholder='验证码'
  8.   value={this.state.value}
  9.   onChange={this.handleChange}
  10. >
  11.   <Image src='https://aotu.io/img.png' />
  12. </AtInput>

:::

Input 参数

参数 说明 类型 可选值 默认值
name 输入框的唯一标识，有传入点击 title 会聚焦输入框 String - -
type 输入框类型 String text,number,password,phone,idcard,digit text
value 输入框值 String - -
placeholder 占位符 String - -
title 输入框左侧标题，若传入为空，则不显示标题 String - -
maxlength 最大长度 Number - 140
cursorSpacing 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离,只在微信小程序有效 Number - 50
confirmType 设置键盘右下角按钮的文字,只在小程序有效 String - ‘完成’
disabled 是否禁止输入，禁止点击按钮 Boolean - false
border 是否显示下划线边框 Boolean - true
editable 是否可编辑 Boolean - True
error 是否出现错误 Boolean - false
clear 是否显示清除按钮 Boolean - false
autoFocus 是否自动聚焦 Boolean - false

Input 事件

事件名称 说明 返回参数
onChange 输入框值改变时触发的事件 输入框当前值 value
onFocus 输入框被选中时触发的事件 输入框当前值 value
onBlur 输入框失去焦点时触发的事件 输入框当前值 value
onConfirm 点击完成按钮时触发 输入框当前值 value
onErrorClick 点击错误按钮触发的事件 -