首页 > PHP资讯 > 工具库 > 详解微信小程序组件:input输入框

详解微信小程序组件:input输入框

工具库
input输入框组件说明:

本文介绍input 输入框的各种参数及特性。

input输入框示例代码运行效果如下:

下面是WXML代码:

type:有效值:text 感觉没什么区别password:placeholder:disable:最大长度:

下面是WXSS代码:

.content{  border:1px black solid;  margin: 10px;  font-size: 10pt;  padding: 5px;}input{  border:1px red solid;margin: 5px;}

事件效果图:

下面是WXML代码:

bindinput="当内容改变"bindfocus:当获取焦点bindblur:当失去焦点触发内容:{{log}}

下面是JS代码:

Page({  data:{    log:'事件触发'  },  bindblur:function(e){    var value=e.detail.value;    this.setData({      log:"bindblur失去焦点.输入框值="+value    })  },  bindinput:function(e){    var value=e.detail.value;    this.setData({      log:"bindinput内容改变.输入框值="+value    })  },  bindfocus:function(e){    var value=e.detail.value;    this.setData({      log:"bindfocus获取焦点.输入框值="+value    })  }})

下面是WXSS代码:

.content{  border:1px black solid;  margin: 10px;  font-size: 10pt;  padding: 5px;}input{  border:1px red solid;margin: 5px;}

组件属性:

属性解析:

下面是WXML代码:




  等同于  

 等同于 
 等同于 
 等同于 
 等同于 



以上就是详解微信小程序组件:input输入框 的详细内容,更多请关注 第一PHP社区 其它相关文章!

工具库

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持32不支持0