全部产品

InputItem 文本输入

文本输入。

扫码体验

image.png

示例代码

// API-DEMO page/component/input-item/input-item.json
{
  "defaultTitle": "小程序AntUI组件库",
  "usingComponents": {
    "list": "mini-antui/es/list/index",
    "list-item": "mini-antui/es/list/list-item/index",
    "input-item": "mini-antui/es/input-item/index",
    "picker-item": "mini-antui/es/picker-item/index"
  }
}

<!-- API-DEMO page/component/input-item/input-item.axml -->
<view>
  <view style="margin-top: 10px;" />
  <list>
    <input-item
      data-field="cardNo"
      clear="{{true}}"
      value="{{cardNo}}"
      className="dadada"
      placeholder="银行卡号"
      focus="{{inputFocus}}"
      onInput="onItemInput"
      onFocus="onItemFocus"
      onBlur="onItemBlur"
      onConfirm="onItemConfirm"
      onClear="onClear"
    >
      卡号
      <view slot="extra" class="extra" onTap="onExtraTap"></view>
    </input-item>
    <picker-item
      data-field="bank"
      placeholder="选择发卡银行"
      value="{{bank}}"
      onPickerTap="onPickerTap"
    >
      发卡银行
    </picker-item>
    <input-item
      data-field="name"
      placeholder="姓名"
      type="text"
      value="{{name}}"
      clear="{{true}}"
      onInput="onItemInput"
      onClear="onClear"
    >
      姓名
    </input-item>
    <input-item
      data-field="password"
      placeholder="密码"
      password
    >
      密码
    </input-item>
    <input-item
      data-field="remark"
      placeholder="备注"
      last="{{true}}"
    />
  </list>
  <view style="margin: 10px;">
    <button type="primary" onTap="onAutoFocus">聚焦</button>
  </view>
</view>

// API-DEMO page/component/input-item/input-item.js
const banks = ['网商银行', '建设银行', '工商银行', '浦发银行'];

Page({
  data: {
    cardNo: '1234****',
    inputFocus: true,
    bank: '',
    name: '',
  },
  onAutoFocus() {
    this.setData({
      inputFocus: true,
    });
  },
  onExtraTap() {
    my.alert({
      content: 'extra tapped',
    });
  },
  onItemInput(e) {
    this.setData({
      [e.target.dataset.field]: e.detail.value,
    });
  },
  onItemFocus() {
    this.setData({
      inputFocus: false,
    });
  },
  onItemBlur() {},
  onItemConfirm() {},
  onClear(e) {
    this.setData({
      [e.target.dataset.field]: '',
    });
  },
  onPickerTap() {
    my.showActionSheet({
      title: '选择发卡银行',
      items: banks,
      success: (res) => {
        this.setData({
          bank: banks[res.index],
        });
      },
    });
  },
});

/* API-DEMO page/component/input-item/input-item.acss */
.extra {
  background-image: url('https://gw.alipayobjects.com/zos/rmsportal/dOfSJfWQvYdvsZiJStvg.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
  opacity: 0.2;
  height: 20px;
  width: 20px;
  padding-left: 10px;
}

属性

属性名描述类型默认值
className自定义的 class。String''
labelCls自定义 abel 的 class。String''
inputCls自定义 input 的 class。String''
last是否最后一行。Booleanfalse
value初始内容。String''
name组件名字,用于表单提交获取数据。String''
typeinput 的类型,有效值:text,number,idcard,digit(详情请见下方表格)。Stringtext
password是否是密码类型。Booleanfalse
placeholder占位符。String''
placeholderStyle指定 placeholder 的样式。String''
placeholderClass指定 placeholder 的样式类。String''
disabled是否禁用。Booleanfalse
maxlength最大长度。Number140
focus获取焦点。Booleanfalse
clear是否带清除功能,仅 disabled 为 false 才生效。Booleanfalse
onInput键盘输入时触发 input 事件。(e: Object) => void-
onConfirm点击键盘完成时触发。(e: Object) => void-
onFocus聚焦时触发。(e: Object) => void-
onBlur失去焦点时触发。(e: Object) => void-
onClear点击清除 icon 时触发。() => void-

type 属性值介绍

  • text: 字符输入框
  • number: 纯数字输入框( 0-9 之间的数字)
  • idcard:身份证输入框( 0-9 之间的数字,以及字符 x)
  • digit:数字输入框,( 0-9 之间的数字,以及小数点 . 字符,可用于含有小数的数字)

注意:type 的属性值影响的是真机中的键盘类型,在模拟器中并不一定会有效果。

slots

slotname说明必填
extra用于渲染input-item项右边说明。

常见问题

为何 setData 数据为空时,断点 money 值已经置空,但是在输入框还是显示0?

this.setData 设置 data 为空时,不会渲染页面,建议使用组件的 clear。

相关链接