微信小程序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    //最大输入长度
经验分享 程序员 微信小程序 职场和发展