微信小程序——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标签有时会出现失灵的情况。但愿有人能一块儿讨论一下缘由。