输入框Input有哪些属性,如何使用_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

通过键盘输入内容，是最基础的表单域包装，一般用在表单页进行信息的收集，提供文本框、选择框两种类型。

当 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"
  }
}