All Products
Search
Document Center

InputItem

Last Updated: Feb 04, 2021

This section describes InputItem, the text input component.

Property Description Type Default value
className Custom class. String ‘’
labelCls Class of the custom labels. String ‘’
inputCls Class of the custom inputs. String ‘’
last Whether it is the last line. Boolean false
value Initial content String ‘’
name The component name, which is used to submit the form to obtain data. String ‘’
type Type of the input, which can be text, number, idcard, or digit. String text
password Whether the type is password. Boolean false
placeholder The placeholder. String ‘’
placeholderStyle The specified placeholder style. String ‘’
placeholderClass The specified placeholder style class. String ‘’
disabled Whether to disable the button. Boolean false
maxlength The maximum length. Number 140
focus Obtain the focus. Boolean false
clear Whether the clear function is enabled. This property is valid only when the value of disabled is false. Boolean false
onInput The input event is triggered when keyboard input occurs. (e: Object) => void -
onConfirm Triggered when the keyboard is tapped. (e: Object) => void -
onFocus Triggered when the focus action occurs. (e: Object) => void -
onBlur Triggered when the focus is lost. (e: Object) => void -
onClear Triggered when you tap to clear the icon. () => void -

slots

slotname Description
extra Used to render the description of input-item on the right. This property is optional.

Sample code

  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  3. "usingComponents": {
  4. "list": "mini-antui/es/list/index",
  5. "list-item": "mini-antui/es/list/list-item/index",
  6. "input-item": "mini-antui/es/input-item/index",
  7. "picker-item": "mini-antui/es/picker-item/index"
  8. }
  9. }
  1. <view>
  2. <view style="margin-top: 10px;" />
  3. <list>
  4. <input-item
  5. data-field="cardNo"
  6. clear="{{true}}"
  7. value="{{cardNo}}"
  8. className="dadada"
  9. placeholder="Bank card number"
  10. focus="{{inputFocus}}"
  11. onInput="onItemInput"
  12. onFocus="onItemFocus"
  13. onBlur="onItemBlur"
  14. onConfirm="onItemConfirm"
  15. onClear="onClear"
  16. >
  17. Card number
  18. <view slot="extra" class="extra" onTap="onExtraTap"></view>
  19. </input-item>
  20. <picker-item
  21. data-field="bank"
  22. placeholder="Select the card-issuing bank"
  23. value="{{bank}}"
  24. onPickerTap="onPickerTap"
  25. >
  26. Card-issuing bank
  27. </picker-item>
  28. <input-item
  29. data-field="name"
  30. placeholder="Name"
  31. type="text"
  32. value="{{name}}"
  33. clear="{{true}}"
  34. onInput="onItemInput"
  35. onClear="onClear"
  36. >
  37. Name
  38. </input-item>
  39. <input-item
  40. data-field="password"
  41. placeholder="Password"
  42. password
  43. >
  44. Password
  45. </input-item>
  46. <input-item
  47. data-field="remark"
  48. placeholder="Remarks"
  49. last="{{true}}"
  50. />
  51. </list>
  52. <view style="margin: 10px;">
  53. <button type="primary" onTap="onAutoFocus">Focus</button>
  54. <view>
  55. </view>
  1. const banks = ['MYbank', 'China Construction Bank', 'Industrial and Commercial Bank of China', 'Shanghai Pudong Development Bank'];
  2. Page({
  3. data: {
  4. cardNo: '1234****',
  5. inputFocus: true,
  6. bank: '',
  7. name: '',
  8. },
  9. onAutoFocus() {
  10. this.setData({
  11. inputFocus: true,
  12. });
  13. },
  14. onExtraTap() {
  15. my.alert({
  16. content: 'extra tapped',
  17. });
  18. },
  19. onItemInput(e) {
  20. this.setData({
  21. [e.target.dataset.field]: e.detail.value,
  22. });
  23. },
  24. onItemFocus() {
  25. this.setData({
  26. inputFocus: false,
  27. });
  28. },
  29. onItemBlur() {},
  30. onItemConfirm() {},
  31. onClear(e) {
  32. this.setData({
  33. [e.target.dataset.field]: '',
  34. });
  35. },
  36. onPickerTap() {
  37. my.showActionSheet({
  38. title: 'Select the card-issuing bank',
  39. items: banks,
  40. success: (res) => {
  41. this.setData({
  42. bank: banks[res.index],
  43. });
  44. },
  45. });
  46. },
  47. });
  1. .extra {
  2. background-image: url('https://gw.alipayobjects.com/zos/rmsportal/dOfSJfWQvYdvsZiJStvg.svg');
  3. background-size: contain;
  4. background-repeat: no-repeat;
  5. background-position: right center;
  6. opacity: 0.2;
  7. height: 20px;
  8. width: 20px;
  9. padding-left: 10px;
  10. }