文档

输入框(Input)

更新时间:

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

当 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"
  }
}
  • 本页导读 (0)
文档反馈