微信小程序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
    })
  }
})