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 参数

Input 事件