支付寶小程序擴(kuò)展表單 文本輸入·InputItem

文本輸入。

說明：

• 輸入?yún)^(qū)內(nèi)容不折行，如用戶輸入的字?jǐn)?shù)超出顯示區(qū)，輸入框內(nèi)的文字可左右滑動；
• 如無特殊情況，清空按鈕在框內(nèi)有內(nèi)容且獲得焦點(diǎn)時默認(rèn)出現(xiàn)。

掃碼體驗(yàn)

示例代碼

{


  "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 狀態(tài)的 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： 純數(shù)字輸入框（ 0-9 之間的數(shù)字）
• idcard：身份證輸入框（ 0-9 之間的數(shù)字，以及字符 x）
• digit：數(shù)字輸入框，（ 0-9 之間的數(shù)字，以及小數(shù)點(diǎn) . 字符，可用于含有小數(shù)的數(shù)字）

注意：type 的屬性值影響的是真機(jī)中的鍵盤類型，在模擬器中并不一定會有效果。

slots

常見問題

為何 setData 數(shù)據(jù)為空時，斷點(diǎn) money 值已經(jīng)置空，但是在輸入框還是顯示 0？

this.setData 設(shè)置 data 為空時，不會渲染頁面，建議使用組件的 clear。