輸入框（Input） - Mobile Platform as a Service

通過鍵盤輸入內容，是最基礎的表單域封裝，一般用在表單頁進行資訊的收集，提供文字框、選擇框兩種類型。

當 Input 作為表單組件，配合 Form/FormItem 組件使用時，需要設定 mode 的值為 form。

屬性

屬性	類型	必填	預設值	說明
label	string \| slot	否	-	標籤文案
controlled	boolean	否	false	是否受控模式
type	'text' \| 'number' \| 'idcard' \| 'digit' \| 'numberpad' \| 'digitpad' \| 'idcardpad'	否	'text'	輸入框的類型
password	boolean	否	false	是否是密碼類型
placeholder	string	否	-	預留位置
placeholderClass	string	否	-	指定 placeholder 的樣式類
placeholderStyle	string	否	-	指定 placeholder 的樣式，可設定間距
maxLength	number	否	140	最大長度
confirmType	'done' \| 'go' \| 'next' \| 'search' \| 'send'	否	"done"	設定鍵盤右下角按鈕的文字，有效值：done（顯示“完成”）、go（顯示“前往”）、next（顯示“下一個”）、search（顯示“搜尋”）、send（顯示“發送”），平台不同顯示的文字略有差異。重要只有在 type 為 text 時有效。
confirmHold	boolean	否	false	點擊鍵盤右下角按鈕時是否保持鍵盤不收合狀態
cursor	number	否	-	指定 focus 時的游標位置
selectionStart	number	否	-1	擷取游標時，選中文本對應的焦點游標起始位置，需要和 selection-end 配合使用
selectionEnd	number	否	-1	擷取游標時，選中文本對應的焦點游標結束位置，需要和 selection-start 配合使用
randomNumber	boolean	否	false	當 type 為 number、digit、idcard 數字鍵台是否隨機排列
enableNative	boolean	否	-	是否啟用 Native 渲染
layer	'horizontal' \| 'vertical'	否	'horizontal'	input 排列位置
inputCls	string	否	-	input 輸入框的樣式類名
labelCls	string	否	-	label 地區的樣式類名
value	string	否	-	輸入框的值
clear	boolean	否	true	顯示清除表徵圖
autoFocus	boolean	否	false	自動聚焦，iOS 可能會失效
ref	React.Ref	否	-	用於動作表單的執行個體，有 focus 和 blur 兩個方法
id	string	否	-	表單元素 id
name	string	否	-	表單元素 name
disabled	boolean	否	false	是否禁用
mode	'noraml' \| 'form'	否	normal	配合 Form/FormItem 組件使用時，需設定為 form
className	string	否	-	類名

事件

事件名	說明	類型
onConfirm	點擊鍵盤完成時觸發此回調	`(v: string) => void`
onClear	清除輸入內容時觸發此回調	`(v: string) => void`
onFocus	聚焦時觸發此回調	`(v: string) => void`
onBlur	失焦時觸發此回調	`(v: string) => void`
onChange	輸入時觸發此回調	`(v: string) => void`

樣式類

類名	說明
amd-input-item	整體樣式
amd-input-item-line	整體樣式
amd-input-item-layer	左側內容地區樣式
amd-input-item-layer-vertical	左側內容地區樣式
amd-input-item-layer-normal	左側內容地區樣式
amd-input-item-label	標籤樣式
amd-input-item-content	Input 組件樣式
amd-input-item-clear	清除表徵圖地區樣式
amd-input-item-clear-icon	清除表徵圖樣式
amd-input-item-extra	額外地區樣式

程式碼範例

基本使用

index.axml 的程式碼範例如下：

<view>
  <demo-block title="基礎用法">
    <input-item placeholder="請輸入內容" clear="{{false}}" type="text" onChange="handleItemChange" onFocus="handleItemFocus" onBlur="handleItemBlur" onConfirm="handleItemConfirm" >
    </input-item>
  </demo-block>
  <demo-block title="帶清除按鈕">
    <input-item placeholder="請輸入內容" clear="{{true}}" type="text" onChange="handleItemChange" onClear="handleItemClear">
    </input-item>
  </demo-block>
  <demo-block title="禁用狀態">
    <input-item placeholder="被禁用的輸入框" 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"
  }
}