字節(jié)跳動(dòng)小程序開發(fā)組件文檔 input

2019-08-09 14:15 更新

輸入框。

屬性名	類型	默認(rèn)值	說明	最低版本
value	String		輸入框的初始值，也可以通過setData修改	1.0.0
type	String	text	input的類型，詳情見后面的說明	1.0.0
password	Boolean	false	是否為密碼輸入	1.0.0
placeholder	String		占位字符	1.0.0
placeholder-style	String		占位符的樣式	1.0.0
disabled	Boolean	false	是否禁用	1.0.0
maxlength	Number	140	最大輸入長(zhǎng)度	1.0.0
focus	Boolean	false	獲取焦點(diǎn)	1.0.0
cursor-spacing	Number	0	指定軟鍵盤彈出時(shí)，與光標(biāo)的距離是多少，單位是px	1.0.0
cursor	Number	-1	指定focus時(shí)的光標(biāo)位置	1.0.0
selection-start	Number	-1	指定focus時(shí)選中片段的起始位置	1.0.0
selection-end	Number	-1	指定focus時(shí)選中片段的結(jié)束位置	1.0.0
bindinput	EventHandler		鍵盤輸入時(shí)觸發(fā)，e.detail={value, cursor}；處理函數(shù)可以直接`return`一個(gè)字符串，將替換input框的內(nèi)容。	1.0.0
bindfocus	EventHandler		輸入框聚焦時(shí)觸發(fā)，event.detail={value,height}，height為軟鍵盤高度	1.0.0
bindblur	EventHandler		輸入框失去焦點(diǎn)時(shí)觸發(fā)，event.detail={value}	1.0.0
bindconfirm	EventHandler		用戶點(diǎn)擊鍵盤的完成按鈕時(shí)觸發(fā)，event.detail={value}	1.0.0

type的取值范圍：

值	說明
text	文本輸入鍵盤
number	數(shù)字輸入鍵盤
digit	帶小數(shù)點(diǎn)的數(shù)字鍵盤

WARNING

避免過于頻繁地在bindinput回調(diào)里執(zhí)行setData({value: ...})，如果想在鍵盤輸入時(shí)改變input框的值，可以直接在bindinput回調(diào)里return一個(gè)字符串

示例

開發(fā)者工具中預(yù)覽

<view class="page-cells page-cells_after-title">
    <view class="page-cell page-cell_input">
        <input class="page-input"
            placeholder="這個(gè)只有在按鈕點(diǎn)擊的時(shí)候才聚焦" focus="{{focus}}" />
    </view>
</view>
<view class="btn-area">
  <button bindtap="bindButtonTap">使得輸入框獲取焦點(diǎn)</button>
</view>

<view class="page-cells page-cells_after-title">
<view class="page-cell page-cell_input">
    <input class="page-input"
        placeholder="focus詳情"
        bindfocus="onfocus" bindconfirm="onconfirm" />
</view>
</view>

<view class="btn-area">{{focusDetail}}</view>

<view class="page-cells page-cells_after-title">
<view class="page-cell page-cell_input">
    <input class="page-input" placeholder="blur測(cè)試" bindblur="onblur" />
</view>
</view>

Page({
  data: {
    focus: false,
  },
  bindButtonTap: function (e) {
    this.setData({
      focus: true,
    })
  },
  onfocus: function (e) {
    console.log(e)
    this.setData({focusDetail: JSON.stringify(e.detail)})
  },
  onblur: function (e) {
    tt.showToast({title: 'blur'})
  },
  onconfirm: function (e) {
    tt.showToast({title: 'confirm'})
  }
})

以上內(nèi)容是否對(duì)您有幫助：

寫筆記

我要補(bǔ)充