Input

To use Input as a form component with Form/FormItem, set `mode` to `form`.

Properties

Property	Type	Required	Default	Description
label	string | slot	No	-	Label text.
controlled	boolean	No	false	Enables controlled mode.
type	'text' | 'number' | 'idcard' | 'digit' | 'numberpad' | 'digitpad' | 'idcardpad'	No	'text'	Input type.
password	boolean	No	false	Enables password input.
placeholder	string	No	-	Placeholder text.
placeholderClass	string	No	-	CSS class for the placeholder.
placeholderStyle	string	No	-	Inline style for the placeholder, such as spacing.
maxLength	number	No	140	Maximum input length.
confirmType	'done' | 'go' | 'next' | 'search' | 'send'	No	"done"	Text on the keyboard confirm button. Valid values: 'done', 'go', 'next', 'search', and 'send'. Display may vary by platform. Important Only effective when type is 'text'.
confirmHold	boolean	No	false	Keeps the keyboard open after the confirm button is tapped.
cursor	number	No	-	Cursor position on focus.
selectionStart	number	No	-1	Start of text selection on focus. Use with selectionEnd.
selectionEnd	number	No	-1	End of text selection on focus. Use with selectionStart.
randomNumber	boolean	No	false	Randomizes the numeric keypad layout when type is 'number', 'digit', or 'idcard'.
enableNative	boolean	No	-	Enables native rendering.
layer	'horizontal' | 'vertical'	No	'horizontal'	Component layout direction.
inputCls	string	No	-	CSS class for the input box.
labelCls	string	No	-	CSS class for the label area.
value	string	No	-	Input value.
clear	boolean	No	true	Shows the clear icon.
autoFocus	boolean	No	false	Auto-focuses the input. May not work correctly on iOS.
ref	React.Ref	No	-	Component ref. Provides focus() and blur() methods.
id	string	No	-	Form element ID.
name	string	No	-	Form element name.
disabled	boolean	No	false	Disables the input.
mode	'noraml' | 'form'	No	normal	Set to 'form' when used with Form/FormItem.
className	string	No	-	Custom CSS class.

Events

Event Name	Description	Type
onConfirm	Fires when the keyboard confirm button is tapped.	(v: string) => void
onClear	Fires when the input is cleared.	(v: string) => void
onFocus	Fires when the input receives focus.	(v: string) => void
onBlur	Fires when the input loses focus.	(v: string) => void
onChange	Fires on each input change.	(v: string) => void

CSS classes

Class name	Description
amd-input-item	Overall component style.
amd-input-item-line	Component line style.
amd-input-item-layer	Left content area style.
amd-input-item-layer-vertical	Left content area style (vertical layout).
amd-input-item-layer-normal	Left content area style (normal layout).
amd-input-item-label	Label style.
amd-input-item-content	Input component style.
amd-input-item-clear	Clear icon area style.
amd-input-item-clear-icon	Clear icon style.
amd-input-item-extra	Extra area style.

Code examples

Basic usage

index.axml:

<view>
  <demo-block title="Basic usage">
    <input-item placeholder="Enter content" clear="{{false}}" type="text" onChange="handleItemChange" onFocus="handleItemFocus" onBlur="handleItemBlur" onConfirm="handleItemConfirm" >
    </input-item>
  </demo-block>
  <demo-block title="With clear button">
    <input-item placeholder="Enter content" clear="{{true}}" type="text" onChange="handleItemChange" onClear="handleItemClear">
    </input-item>
  </demo-block>
  <demo-block title="Disabled state">
    <input-item placeholder="Disabled input box" disabled="{{true}}" clear="{{true}}" type="text" onChange="handleItemChange" onClear="handleItemClear">
    </input-item>
  </demo-block>
</view>

index.js:

Page({
  data: {
  },
  handleItemChange(e) {
    // eslint-disable-next-line no-console
    console.log('onItemChange:', e);
  },
  handleItemFocus(v) {
    // eslint-disable-next-line no-console
    console.log('focus:', v);
  },
  handleItemBlur(v) {
    // eslint-disable-next-line no-console
    console.log('blur:', v);
  },
  handleItemConfirm(v) {
    // eslint-disable-next-line no-console
    console.log('confirm:', v);
  },
  handleItemClear() {
    // eslint-disable-next-line no-console
    console.log('onItemClear');
  },
});

index.acss:

.demoList {
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 0 12px
}
.amd-input-item-title {
  margin-top: 12px;
  font-family: PingFangSC-Regular;
  font-size: 17px;
  color: #666666;
  margin-bottom: 8px;
  text-align: center;
}
.amd-list-item-line {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-align-self: stretch;
  align-self: stretch;
  max-width: 100%;
  overflow: hidden;
  padding: 0px 0px;
}

.amd-list-input-item-arrow {
  height: 15px;
  width: 7.5px;
}
.amd-list-input-item-phone {
  height: 18px;
  width: 16px;
}

.amd-list-input-item-code {
  font-family: PingFangSC-Regular;
  font-size: 17px;
  color: #1677ff;
  text-align: center;
}
.amd-list-input-item-line {
  color: #EEEEEE;
  margin: 0 12px 0 10px;
}

index.json:

{
  "defaultTitle": "InputItem",
  "usingComponents": {
    "input-item": "antd-mini/es/InputItem/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}