支付宝小程序扩展表单 文本输入·InputItem

文本输入。

说明：

• 输入区内容不折行，如用户输入的字数超出显示区，输入框内的文字可左右滑动；
• 如无特殊情况，清空按钮在框内有内容且获得焦点时默认出现。

扫码体验

示例代码

{

  "defaultTitle": "input-item",

  "usingComponents":{

    "list": "mini-ali-ui/es/list/index",

    "input-item": "mini-ali-ui/es/input-item/index",

    "am-icon": "mini-ali-ui/es/am-icon/index"

  }

}

<view>

  <view style="margin-top: 10px;"></view>

  <list>

    <input-item data-field="cardNo" 

      clear="{{false}}" 

      value="{{cardNo}}" 

      className="dadada" 

      placeholder="银行卡号" 

      onInput="onItemInput" 

      onBlur="onItemBlur" 

      onConfirm="onItemConfirm" 

      controlled="{{true}}"
      onClear="onClear">

      卡号

      <view slot="extra" class="extra" onTap="onExtraTap"></view>

    </input-item>

    <input-item data-field="name" 

      placeholder="姓名" 

      type="text" 

      value="{{name}}" 

      clear="{{true}}" 

      onInput="onItemInput" 

      onClear="onClear">姓名</input-item>

      <input-item data-field="password" password="{{true}}" 

      placeholder="密码">密码</input-item>

    <input-item data-field="layerShow1" 

      placeholder="layer 为 vertical 的排列" 

      type="text" 

      layer="vertical"

      value="{{layerShow1}}" 

      clear="{{true}}" 

      onInput="onItemInput" 

      onClear="onClear">

      竖向表单

      <view onTap="onExtraTap" slot="extra">

        <am-icon type="phone-book_" size="24" color="#1677ef"></am-icon>

      </view>

    </input-item>

    <input-item data-field="layerShow2"

      placeholder="layer 为 vertical 的排列" 

      type="text" 

      layer="vertical"

      value="{{layerShow2}}" 

      clear="{{true}}" 

      onInput="onItemInput" 

      onClear="onClear">

      竖向表单

    </input-item>

    <input-item data-field="layerShow3" 

      placeholder="layer 为 vertical 的排列" 

      type="text" 

      layer="vertical"

      disabled="{{true}}"

      value="{{layerShow3}}" 

      clear="{{true}}" 

      onInput="onItemInput" 

      onClear="onClear">

      竖向表单

      <view onTap="onExtraTap" slot="extra">

        <am-icon type="phone-book_" size="24" color="#1677ef"></am-icon>

      </view>

    </input-item>

    <input-item data-field="remark" placeholder="备注"></input-item>

  </list>

</view>

Page({

  data: {

    cardNo: '1234****',

    name: '',

    layerShow1: '',

    layerShow2: '垂直输入框的布局',

    layerShow3: 'disabled 状态的 input',

  },

  onExtraTap() {

    my.alert({

      content: 'extra tapped',

    });

  },

  onItemInput(e) {

    this.setData({

      [e.target.dataset.field]: e.detail.value,

    });

  },

  onItemFocus() {},

  onItemBlur() {},

  onItemConfirm() {},

  onClear(e) {

    this.setData({

      [e.target.dataset.field]: '',

    });

  },

  onSend() {

    my.alert({

      title: 'verify code sent',

    });

  },

});

.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: 22px;

  width: 22px;

}

属性

type 属性值介绍

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

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

slots

常见问题

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

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