微信小程序——input组件

最新推荐文章于 2025-07-17 10:00:00 发布

Kinggitte

最新推荐文章于 2025-07-17 10:00:00 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wqwweerrtyy/article/details/79128774

本文介绍了微信小程序中input组件的使用，强调了由于其易出现漏洞，需要设置限制条件。文章提供了input组件的主要属性参考链接，并展示了一个简单的User、Password及确认Password的输入样本，探讨了bindconfirm和bindinput两种触发逻辑层事件的区别，前者在确认后触发，后者在输入时触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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标签有时会出现失灵的状况。希望有人能一起讨论一下原因。