All Products
Search
Document Center

AmountInput

Last Updated: Feb 04, 2021

This section describes AmountInput, an amount input box.

Property Description Type Default value Mandatory
type Type of the input, which can be digit or number. String number false
title Title in the upper left. String - false
extra Description in the lower left. String - false
value Current value of the input box. String - false
btnText Text of the button in the lower right. String - false
placeholder placeholder String - false
focus Obtains the cursor automatically. Boolean false false
onInput Triggered when keyboard input occurs. (e: Object) => void - false
onFocus Triggered when the focus is obtained. (e: Object) => void - false
onBlur Triggered when the focus is lost. (e: Object) => void - false
onConfirm Triggered when the keyboard is tapped. (e: Object) => void - false
onClear Triggered when the clear icon is tapped. () => void - false
onButtonClick Triggered when the button in the lower right is tapped. () => void - false
maxLength Maximum number of characters allowed. Number - false
controlled Whether the component is a controlled component. If the value is true, the content of value is fully controlled by setData. Boolean false false

Sample code

 
  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  3. "usingComponents": {
  4. "amount-input": "mini-antui/es/amount-input/index"
  5. }
  6. }
 
  1. <view>
  2. <amount-input
  3. type="digit"
  4. title="Amount to transfer in"
  5. extra="You are advised to transfer in RMB 100 or more"
  6. placeholder="Enter the amount to transfer in"
  7. value="{{value}}"
  8. maxLength="5"
  9. focus="{{true}}"
  10. btnText="Withdraw all"
  11. onClear="onInputClear"
  12. onInput="onInput"
  13. onConfirm="onInputConfirm" />
  14. </view>
 
  1. Page({
  2. data: {
  3. value: 200,
  4. },
  5. onInputClear() {
  6. this.setData({
  7. value: '',
  8. });
  9. },
  10. onInputConfirm() {
  11. my.alert({
  12. content: 'confirmed',
  13. });
  14. },
  15. onInput(e) {
  16. const { value } = e.detail;
  17. this.setData({
  18. value,
  19. });
  20. },
  21. onButtonClick() {
  22. my.alert({
  23. content: 'button clicked',
  24. });
  25. },
  26. onInputFocus() {},
  27. onInputBlur() {},
  28. });