微信小程序——input组件

input组件，很容易出现各种漏洞的标签，所以做好各种限制条件，属性值也有很多，但是大部分和html的<input>相似。主要属性很多，在此贴出W3cSchool链接。

点击打开链接

这里实例是一个较小的User、Password和确认Password的样本，因为对输入没有做任何限制，不建议直接拿来使用。

a.wxml

<view class="section">
  <input placeholder='User'auto-focus/>
</view>

<view class="section">
  <input type='password' placeholder='Password' auto-focus bindinput='changePassword'/>
</view>

<view class="section">
  <input type='password' placeholder='Ensure Your Password' bindconfirm="checkPassword"/>
</view>

这里使用了两种触发逻辑层的模式，bindconfirm和bindinput，前者是确认后触发，后者是输入时触发。

a.wxss

.section{font-size: 12px;padding: 10px 5px;border-bottom: dashed 1px #cecece;}
.section input{border: solid 1px #ccc;padding: 0 5px;background-color: #fff;border-radius: 4px;height: 30px;}

a.js

Page(
{
	data:{
     password:0
	},
  changePassword:function(e){
    this.data.password = e.detail.value;
  },
  checkPassword:function(e)
  {
    if(this.data.password != e.detail.value)
    {
      console.log("密码不相同");
    }
  }
}	
);

这是一个简单的实现，但是type = “password”后我在模拟器点击input标签有时会出现失灵的状况。希望有人能一起讨论一下原因。