input的type之中并无password属性。 关键思路：动态改变password的值，从而实现密码的显示与隐藏。

微信小程序6位支付密码输入框

微信小程序6位支付密码输入框 产品需求 微信小程序支付密码6位输入框实现效果 非明文6位输入框，模拟光标，输入自动移到下一位，满6位自动设置实现原理 1.放置一个输入框，隐藏其文字和位置，同时设置支付输入框（表格）样式 2.当点击输入框时设置表格为聚焦状态，唤起键盘，点击空白处，失去焦点，设为失去焦点样式 3.限制输入框最大字数为6并且监听输入框状态，以输入框值的长度作为圆点和光标展示的渲染条件 4.当输入框的值等于6时，设置组件的事件传递到引用的页面，页面自定义事件（发起支付请求等...） 其他说明 6位支付密码是一个很常见的需求。 在H5端用vue做过组件，app端也要求实现，小程序类似的组件在网页上检索到的并不多，仅此记录。

微信小程序自定义组件-可清除的input组件

最近正在做的一个小程序项目中需要用到一个可清除的输入框控件，为了在项目中使用方便以及方便其他项目直接使用，便封装了一个可清除的input自定义组件。 组件需要达到的需求是：输入框内没有内容时，删除按钮隐藏；当输入框内有内容时，删除按钮显示，点击删除按钮则清空输入框内所有内容。

并且还可以设置输入框整体样式以及输入框左侧图标。

明确了需求之后，就可以开始着手实现了。 首先，在目标目录下新建一个自定义组件 建好之后，我们需要来设计布局。根据需求来看，我们只需要三个组件：两个image和一个input。左边一个image提示图标，然后一个input输入框，最后一个image删除按钮。

我们要把尽可能多的数据设置成可以修改的绑定数据，提高自定义组件的可扩展性。 最终确定的wxml布局文件如下： 然后，我们就要来设置组件的一些属性和监听方法了。小程序的组件属性列表是定义在.js文件的properties里的。

把需要暴露出去并可以修改的属性都写在这里面。其语法示例如下： 我的属性列表如下： 完成了属性列表的编写之后，接下来我们需要为自定义组件添加监听事件。 事件系统是组件间通信的主要方式之一。

自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。 监听以及触发事件的语法是这样的： 这里我们需要设置的触发事件有，输入框的输入事件以及输入框的确认事件。通过 triggerEvent 方法指定事件名以及事件触发事件参数 以上就已经完成了这个可清除input组件的自定义开发了。

现在来看怎么使用这个组件。 首先在需要使用此组件的页面.json文件中设置usingComponents属性来引入这个自定义组件 然后，我们就可以在页面中引用这个自定义组件了，引用的方式非常简单，通过我们在上一步设置的标签名称就可以引用了。

标签： 微信小程序输入框样式