antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
298 lines (231 loc) • 11.5 kB
Markdown
---
nav:
path: /components
group:
title: Information Entry
order: 10
toc: content
---
# Input
Through the keyboard input content, is the most basic form field packaging. Generally used in the form page for information collection.
## Introduction
In `index.json` Introducing Components in
```json
"usingComponents": {
#if ALIPAY
"ant-input": "antd-mini/es/Input/index",
"ant-textarea": "antd-mini/es/Input/Textarea/index"
#endif
#if WECHAT
"ant-input": "antd-mini/Input/index",
"ant-textarea": "antd-mini/Input/Textarea/index"
#endif
}
```
## Code Sample
### Input basic usage
```xml
<ant-input placeholder="input here" />
<ant-input placeholder="input here" defaultValue="initial value" />
<ant-input placeholder="input here, with clear button" allowClear />
<ant-input placeholder="disabled input" disabled="{{true}}" />
```
### With Prefix and Suffix
```xml
<ant-input placeholder="input here" allowClear>
<view slot="prefix">￥</view>
<view slot="suffix">RMB</view>
</ant-input>
```
### Controlled Mode
```xml
<ant-input controlled="{{true}}" value="{{value}}" placeholder="input here" allowClear />
```
### Enter Amount
```xml
<ant-input placeholder="input digit here" type="digit" focusClassName="border" allowClear>
<view slot="prefix">￥</view>
<view slot="suffix">RMB</view>
</ant-input>
```
### SearchBar search box
```xml
<view class="search-line">
<ant-input
placeholder="input here"
onChange="onChange"
className="search-bar"
focusClassName="search-bar-focus"
confirm-type="search"
allowClear
focus
>
<ant-icon slot="prefix" type="SearchOutline" />
<ant-icon slot="suffix" type="AudioOutline" />
</ant-input>
<view class="cancel">Cancel</view>
</view>
```
```css
.search-line {
display: flex;
align-items: center;
padding: 16px;
}
.search-bar {
padding: 4px 0 4px 0;
border-radius: 4px;
border: 1px solid transparent;
transition: all 0.4s;
flex: 1;
&-focus {
border-color: #1677ff;
}
}
.cancel {
color: #fff;
margin-left: 8px;
}
```
### Textarea
#### Basic Usage
```xml
<ant-textarea placeholder="input here" autoHeight />
<ant-textarea placeholder="input here" defaultValue="initial value" autoHeight />
```
#### Controlled Mode
```xml
<ant-textarea value="{{value}}" placeholder="input here" allowClear />
```
### Custom
#### With border
```xml
<ant-input className="custom" placeholder="input here" />
```
```css
.custom {
border: 1px solid #ccc;
padding: 4px;
border-radius: 4px;
margin-bottom: 12px;
}
```
#### Custom Background Color
```xml
<ant-input className="custom-color" placeholder="input here" />
```
```css
.custom-color {
margin-bottom: 12px;
input,
textarea {
padding: 4px;
background: #f5f5f5;
border-radius: 4px;
}
}
```
### Demo Code
<code src='../../demo/pages/Input/index'></code>
## API
### Input, Textarea the same property
| Property | Description | Type | Default Value |
| ---------------------- | -------------------------------------------------------------- | ------------------------------------- | ----------------------- |
| className | Class Name | string | - |
| controlled | There are keyboard input problems, you can use `controlled="{{false}}"` | boolean | - |
| defaultValue | Initial value | string | - |
| disabled | Disable | boolean | false |
| maxLength | Maximum length | number | 140 |
| placeholder | Placeholder | string | - |
| style | Style | string | - |
| max | The maximum value, which takes effect only when type is number, digit, numberpad, or digitpad, and a valid number is entered. | number | Number.MAX_SAFE_INTEGER |
| min | The minimum value, which takes effect only when type is number, digit, numberpad, or digitpad, and a valid number is entered. | number | Number.MIN_SAFE_INTEGER |
| precision | Calculation accuracy, keep a few decimal places, enter a valid number to take effect | number | -1 |
| value | The value of the input box. Controlled mode. | string | - |
| #if ALIPAY onConfirm | This callback is triggered when the keyboard is clicked | (value: string, event: Event) => void | - |
| #if ALIPAY onFocus | Trigger this callback when focused | (value: string, event: Event) => void | - |
| #if ALIPAY onBlur | Trigger this callback when out of focus | (value: string, event: Event) => void | - |
| #if ALIPAY onChange | This callback is triggered when input | (value: string, event: Event) => void | - |
| #if WECHAT bindconfirm | This callback is triggered when the keyboard is clicked | (value: string, event: Event) => void | - |
| #if WECHAT bindfocus | Trigger this callback when focused | (value: string, event: Event) => void | - |
| #if WECHAT bindblur | Trigger this callback when out of focus | (value: string, event: Event) => void | - |
| #if WECHAT bindchange | This callback is triggered when input | (value: string, event: Event) => void | - |
### Input property
| Property | Description | Type | Default Value |
| ------------ | ---------------------------------- | ------- | ------ |
| allowClear | You can click the clear icon to delete content | boolean | false |
| enableNative | Whether to use native | boolean | - |
| focus | Focus, View[Detailed Description](#input-focus) | boolean | - |
| password | Whether it is password type | boolean | false |
| prefix | input prefix | slot | - |
| suffix | input suffix | slot | - |
### Textarea Properties
| Property | Description | Type | Default Value |
| ------------ | ---------------- | ------- | ------ |
| autoHeight | Whether to increase automatically. | boolean | false |
| enableNative | Whether to use native | boolean | - |
| showCount | Show word count | boolean | true |
### Input, Textarea More Same Properties
- confirm-type
- name
- placeholder-class
- placeholder-style
- type
[Input](https://opendocs.alipay.com/mini/component/input)
[Textarea](https://opendocs.alipay.com/mini/component/textarea)
### Input focus
To use the focus attribute, you need to add it to the app.json window. `"enableInPageRenderInput": "YES"`Otherwise, the keyboard cannot be opened in iOS.
### Input, Textarea instance methods
Instance methods require small programs `component2` Can be used.
| Property | Description | Type |
| -------- | ------ | ----------------------- |
| update | Update Value | (value: string) => void |
| getValue | get value | () => string |
### Theme customization
#### Style Variables
Component provides the following CSS variables, which can be used to customize styles. For more information, see ConfigProvider Components.
| Variable name | Default Value | Dark Mode Default | Remarks |
| ------------------------------ | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------ |
| --input-item-color | <div style="width: 150px; height: 30px; background-color: #333333; color: #ffffff;">#333333</div> | <div style="width: 150px; height: 30px; background-color: #c5cad1; color: #ffffff;">#c5cad1</div> | Input Text Color |
| --input-item-placeholder-color | <div style="width: 150px; height: 30px; background-color: #cccccc; color: #333333;">#cccccc</div> | <div style="width: 150px; height: 30px; background-color: #474747; color: #ffffff;">#474747</div> | Input item placeholder color |
| --input-item-clear-color | <div style="width: 150px; height: 30px; background-color: #999999; color: #ffffff;">#999999</div> | <div style="width: 150px; height: 30px; background-color: #616161; color: #ffffff;">#616161</div> | Input Clear Button Color |
| --input-background-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #1a1a1a; color: #ffffff;">#1a1a1a</div> | Input Background Color |
## FAQ
### Input focus does not open the keyboard
You need to add it to the app.json window. `"enableInPageRenderInput": "YES"`。
### Cursor problem with Input
Can be viewed [This document](https://opendocs.alipay.com/mini/component/input#FAQ) Use `enableNative` property to resolve.
### Keyboard problems using value controlled mode
This is due [A known issue with input boxes](https://opendocs.alipay.com/mini/component/input#Bug%20%26%20Tip)。
The solution is to call the input update method in ref mode without using value controlled mode.
```xml
<input defaultValue="{{defaultValue}}" ref="handleRef" />
<button
#if ALIPAY
onTap="clear"
#endif
#if WECHAT
bindtap="clear"
#endif
>clear</button>
```
```js
Page({
handleRef(input) {
#if ALIPAY
this.input = input;
#endif
#if WECHAT
this.input = input.detail;
#endif
},
clear() {
this.input.update('');
},
});
```
Starting with v2.15.0, updating values via the update method is not supported in controlled mode.
### Instance method not available
need to use `component2`, for details see[ref Get Component Instance](https://opendocs.alipay.com/mini/framework/component-ref)。
### The input font style is overwritten by css and cannot take effect on ios.
Need to pass in `always-system="{{true}}"`