• Input 输入框
    • 使用指南
    • 一般用法
    • 不同输入框类型
    • 不同状态
    • 自定义右边栏
    • Input 参数
    • Input 事件

    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 点击错误按钮触发的事件 -