在微信项目开发中，input标签用的地方很多，包括用户信息的录入，用户的查询操作等等，那input标签怎么能够快速的上手，熟练的使用呢？希望这篇文章可以帮助到你。

一、input框常用事件

        1.input框获取焦点事件（bindfocus）

                常用在用户获取到焦点时，获取input框中的数据，进行存取或判定。

<input type="text" bindfocus="_bindfocus"/>    //获得焦点事件

_bindfocus(e){
    console.log(e.detail.value);  //可以通过e.detail.value获取到输入框的值
  }

        2.input框失去焦点事件（bindblur）

                常用来对用户输入的值进行保存，是否输入完整的判断，或者配合正则表达式，对用户输入的值进行判定。

<input type="text" bindblur="_bindblur"/>    //失去焦点事件

_bindblur(e){
    console.log(e.detail.value);    //获取input输入框的值
  }

        3.input框输入事件（bindinput）

                每次输入值都会触发，实时获取输入值，可以进行数值的判断，例如：用户验证码输入为4位数字时，注册按钮可以点击，其他状态下不可点击。

<input type="text" bindinput="_bindinput"/>    //input框输入事件

 _bindinput(e){
    console.log(e.detail.value);    //实时获取用户输入值
  }

        4.input框回车事件（bindconfirm）

                用户用户查询操作，输入完以后点击回车，获取用户输入值，进行查询，返回对应信息。

<input type="text" bindconfirm="_bindconfirm"/>    //input框回车事件

 _bindconfirm(e){
    console.log(e.detail.value);    //获取input输入框的值
  }

二、input框常用属性

placeholder    //输入为空时默认显示值
disabled    //是否禁用
maxlength    //最大输入长度

查看微信官方文档 input的type属性 需要digit才可以使用带小数点的键盘

也许你迷茫，但是我想说，在你迷茫的同时，保持本心，过好今天就好。

在微信小程序开发中，input 用来实现文本输入，如输入用户名密码等等

1 基本使用

<input class="input" name="userName" placeholder="请输入用户名" auto-focus="true" />

基本效果就是显示了一个文本输入框。

• placeholder 输入框为空时的占位符
• auto-focus 自动聚集，拉起键盘，需要注意的是一个页面中只能有一个 input 标签 或者 textarea 来设置这个属性

2 获取输入框中的内容

bindinput 属性用来绑定键盘输入时的事件监听，也就是可以实时获取输入中的内容 。

当然 在你的处理函数中可以直接 return 一个结果来替换输入框中的内容。

  <input bindinput="userNameInputAction"  class="input" name="userName" placeholder="请输入用户名" auto-focus="true" />

对应的 js

  /**
   * 输入框实时回调
   * @param {*} options 
   */
  userNameInputAction: function (options) {
    //获取输入框输入的内容
    let value = options.detail.value;
    console.log("输入框输入的内容是 " + value)
  },

效果

3 输入框焦点监听

应用场景还是比较多的，比如输入结束时 去校验个数据什么的

• bindfocus
• bindblur 输入框焦点移出
• bindconfirm 点击键盘的回车键或者是完成按钮时回调的事件

  <input bindfocus="userNameFocusAction" bindblur="userNameBlurAction" bindconfirm="userNameConfirm" placeholder="请输入用户名" />

对应的 js

  userNameFocusAction: function (options) {
    //输入框焦点获取
    let value = options.detail.value;
    console.log("输入框焦点获取 " + value)
  },

  userNameBlurAction: function (options) {
    //输入框焦点移出
    let value = options.detail.value;
    console.log("输入框焦点移出 " + value)
  },
  
  userNameConfirm: function (options) {
    //点击了键盘上的完成按钮
    let value = options.detail.value;
    console.log("点击了键盘上的完成按钮 " + value)
  },

效果图

4 常用输入限制

• disabled 默认为false 不禁用输入框，为true时是不可输入的

<input disabled="{{isInput}}" placeholder="请输入用户名" />

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isInput:true
  },

})

• password 默认为 false ，为true时，输入的内容为密码类型

<input  password="true" placeholder="请输入用户名" />

• value 输入框初始内容

5 type 文本框输入内容格式

在HTML中，input组件中的type属性可以接收哪些值，有button、text、radio、checkbox、hidden、image、reset、submit等。而在微信小程序中，type属性只有text、number、idcard、digit、time和date。

• type 输入框可输入的数据 类型

完毕