详解微信小程序组件：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:&＃39;事件触发&＃39;
  },
  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社区 其它相关文章！