【input】輸入框組件說明

input輸入框組件

原型：

<input
    value="[String]"
    type="[text | number | idcard | digit]"
    password="[Boolean]"
    placeholder="[String]"
    placeholder-style="[String]"
    placeholder-class="[String]"
    disabled="[Boolean]"
    maxlength="[Number]"
    cursor-spacing="[Number | String]"
    focus="[Boolean]"
    confirm-type="[done | send | search | next | go ]"
    confirm-hold="[Boolean]"
    cursor="[Number]"
    selection-start="[Number]"
    selection-end="[Number]"
    adjust-position="[Boolean]"
    bindinput="[EventHandle]"
    bindfocus="[EventHandle]"
    bindblur="[EventHandle]"
    bindconfirm="[EventHandle]"

>
</input>

 

屬性：

名稱	是否必需	類型	默認值	說明
value	否	[String]		輸入框的初始內容
type	否	[text | number | idcard | digit]	text	輸入框輸入鍵盤類型 text  文本輸入鍵盤 number 數字輸入鍵盤 idcard 身份證輸入鍵盤 digit 帶小數點的數字鍵盤
password	否	[Boolean]	false	是否是密碼類型
placeholder	否	[String]		輸入框為空時占位符
placeholder-style	否	[String]		指定 placeholder 的樣式
placeholder-class	否	[String]	input-placeholder	指定 placeholder 的樣式類
disabled	否	[Boolean]	false	是否禁用
maxlength	否	[Number]	140	最大輸入長度（設置為-1時不限制最大長度）
cursor-spacing	否	[Number | String]	0	指定光標與鍵盤的距離，單位px或rpx，默認為px。取 input 距離底部的距離和 cursor-spacing 指定的距離的最小值作為光標與鍵盤的距離
focus	否	[Boolean]	false	自動聚焦，拉起鍵盤
confirm-type	否	[done | send | go | next | search]	done	設置鍵盤右下角按鈕的文字，僅在type='text'時生效 send    右下角按鈕為“發送” search    右下角按鈕為“搜索” next    右下角按鈕為“下一個” go    右下角按鈕為“前往” done    右下角按鈕為“完成”
confirm-hold	否	[Boolean]	false	點擊鍵盤右下角按鈕時是否保持鍵盤不收起 值為false時，點擊鍵盤右下角按鈕時，鍵盤關閉 值為true時，點擊鍵盤右下角按鈕時，鍵盤仍然存在
cursor	否	[Number]		指定focus時的光標位置
selection-start	否	[Number]	-1	光標起始位置，自動聚集時有效，需與selection-end搭配使用
selection-end	否	[Number]	-1	光標結束位置，自動聚集時有效，需與selection-start搭配使用
adjust-position	否	[Boolean]	true	鍵盤彈起時，是否自動上推頁面
bindinput	否	[EventHandle]		鍵盤輸入時觸發，event.detail = {value, cursor, keyCode}，keyCode 為鍵值，2.1.0 起支持，處理函數可以直接 return 一個字符串，將替換輸入框的內容。
bindfocus	否	[EventHandle]		輸入框聚焦時觸發，event.detail = { value, height }，height 為鍵盤高度，在基礎庫 1.9.90 起支持
bindblur	否	[EventHandle]		輸入框失去焦點時觸發，event.detail = {value: value}
bindconfirm	否	[EventHandle]		點擊完成按鈕時觸發，event.detail = {value: value}

 

示例一：點擊按鈕獲取input組件值

<!-- index.wxml -->
<view>
  <input class="weui-input" value="{{inputValue}}" bindinput="setValue" auto-focus placeholder="請輸入文本"/>
</view>
<view>
  <button bind:tap="getValue">點擊獲取input組件值</button>
</view>

 

<!-- index.js -->
Page({
  data: {
    inputValue: ''
  },
  setValue(e){   
    this.setData({
      inputValue: e.detail.value
    });
  },
  getValue(){
    console.log(this.data.inputValue);
  }
})

說明：

第一步將組件input的值與變量{{inputValue}}邦定

第二步通過組件input的input事件，同步更新變量{{inputValue}}值

第三步變量{{inputValue}}的值即是組件的值