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

2020-09-18 11:22 更新

文本输入。

说明:

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

扫码体验

示例代码

{


  "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;


}

属性

属性 类型 默认值 描述 最低版本
className String - 自定义的 class。 -
labelCls String - 自定义 label 的 class。 -
inputCls String - 自定义 input 的 class。 -
last Boolean false 是否最后一行。可选值:true、false。 -
value String - 初始内容。 -
name String - 组件名字,用于表单提交获取数据。 -
type String text input 的类型,可选值:text,number,idcard,digit。 -
password Boolean false 是否是密码类型。可选值:true、false。 -
placeholder String - 占位符。 -
placeholderStyle String - 指定 placeholder 的样式。 -
placeholderClass String - 指定 placeholder 的样式类。 -
disabled Boolean false 是否禁用。可选值:true、false。 -
maxlength Number 140 最大长度。 -
focus Boolean false 获取焦点。可选值:true、false。 -
clear Boolean true 是否带清除功能,仅 disabled 为 false 才生效。可选值:true、false。 -
onInput (e: Object) => void - 键盘输入时触发 input 事件。 -
onConfirm (e: Object) => void - 点击键盘完成时触发。 -
onFocus (e: Object) => void - 聚焦时触发。 -
onBlur (e: Object) => void - 失去焦点时触发。 -
onClear () => void - 点击清除 icon 时触发。 -
layer String - 文本输入框是否为垂直排列,vertical 时为垂直排列,空值为横向排列。可选值:vertical。 1.0.4
controlled Boolean false 是否为受控组件。详情请参见 input 组件 1.0.9

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。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号