微信小程序input全面解析

一、基礎輸入框

1、基礎輸入框是最基本的input組件，支持用戶輸入任意字符串。

2、在wxml中使用<input/>標籤即可創建一個基礎輸入框。

3、示例代碼：

<input placeholder="請輸入"/>

二、數字輸入框

1、數字輸入框只能輸入數字，不支持其他字符。

2、在wxml中，設置type屬性為number即可創建數字輸入框。

3、示例代碼：

<input type="number" placeholder="請輸入數字"/>

三、密碼輸入框

1、密碼輸入框會自動將輸入內容替換為固定符號，保護用戶輸入的隱私。

2、在wxml中，設置type屬性為password即可創建密碼輸入框。

3、示例代碼：

<input type="password" placeholder="請輸入密碼"/>

四、帶清空按鈕的輸入框

1、帶清空按鈕的輸入框在右側有一個可以一鍵清空輸入內容的按鈕。

2、在wxml中，設置type屬性為text，同時設置bindinput、bindblur事件，通過調用代碼清空輸入框內容。

3、示例代碼：

<input type="text" placeholder="請輸入" bindinput="bindInputChange" bindblur="bindInputBlur"/>

Page({
  data: {
    inputValue: ''
  },
  bindInputChange: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  bindInputBlur: function () {
    this.setData({
      inputValue: ''
    })
  }
})

五、帶搜索按鈕的輸入框

1、帶搜索按鈕的輸入框在右側有一個可以點擊搜索輸入內容的按鈕。

2、在wxml中，設置type屬性為text，同時設置bindinput、bindconfirm、bindfocus事件，bindinput事件用於監聽輸入內容，bindconfirm事件用於監聽用戶點擊搜索按鈕，bindfocus事件用於監聽輸入框獲得焦點。

3、示例代碼：

<input type="text" placeholder="請輸入" bindinput="searchInputChange" bindconfirm="searchConfirm" bindfocus="searchFocus"/>

Page({
  data: {
    inputVal: ''
  },
  searchInputChange: function (e) {
    this.setData({
      inputVal: e.detail.value
    })
  },
  searchConfirm: function () {
    console.log('搜索:' + this.data.inputVal)
  },
  searchFocus: function () {
    console.log('輸入框獲得焦點')
  }
})

六、自定義鍵盤的輸入框

1、自定義鍵盤的輸入框可以修改鍵盤類型，自定義鍵盤按鈕，實現更多自定義功能。

2、在wxml中，設置type屬性為text，同時設置focus屬性為true，彈出自定義鍵盤。

3、示例代碼：

<input type="text" placeholder="請輸入" focus="{{focus}}" bindfocus="showCustomKeyboard"/>

Page({
  data: {
    focus: false,
    customKeyboardData: {
      confirmBtn: {
        text: '確定',
        color: '#333',
        background: '#ccc'
      },
      keyValueArray: [
        '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.', '刪除'
      ]
    }
  },
  showCustomKeyboard: function () {
    this.setData({
      focus: true
    })
  }
})