小程序input控件

小程序的input是通过封装的,封装后已是块级元素,而不是原来的行内元素。html

相似label绑定的方法

按一向的套路,给input加个label标签绑定,然而发现并不行。
翻看文档,发现只能绑定4种控件。。。
clipboard.png
那怎么办呢,小程序怎么实现相似label的这种绑定?
还好还好,小程序关上了一扇门,仍是打开了一扇窗!
input控件自带一个focus属性,为true时聚焦,false时失去焦点。详看小程序input
因此能够经过给focus绑定一个变量,经过数据驱动来决定是否聚焦。小程序

优势:更加灵活,不受制于label的限制,只要是能修改到该绑定变量的任何动做,均可以聚焦
缺点:须要js介入,而label标签不须要函数

小程序input的绑定事件

文档中input控件有四个原生事件spa

clipboard.png

如今有个需求是将用户输入的金额,好比500,失去焦点以后显示为¥500,须要用到其中的bindinputbindblur
一开始我打算用一个讨巧的办法(不可行),由于看到bindinput的说明中有一句3d

处理函数能够直接 return 一个字符串,将替换输入框的内容
因此我就在bindinput绑定的的方法里加上 if(//失去焦点) return '¥'+ e.detail.value
失去焦点变量由 bindblur绑定的方法控制,伪代码为:
//记录失去焦点状态的变量改为true
//调用bindinput绑定的方法,把event对象传入

没错,并无起做用。。。bindblur绑定的方法调用不了bindinput绑定的方法,就好像不能在其余函数调用生命周期函数同样code

还好还好,那就别用return了,老老实实经过bindinput绑定的方法获取输入的值记录下来,bindblur事件触发后把记录下来的值加工,而后把加工后的值传给和input控件value属性绑定的变量。完美!component

相关文章
相关标签/搜索