小程序的input是通过封装的,封装后已是块级元素,而不是原来的行内元素。html
按一向的套路,给input加个label标签绑定,然而发现并不行。
翻看文档,发现只能绑定4种控件。。。
那怎么办呢,小程序怎么实现相似label的这种绑定?
还好还好,小程序关上了一扇门,仍是打开了一扇窗!
input控件自带一个focus
属性,为true
时聚焦,false
时失去焦点。详看小程序input
因此能够经过给focus绑定一个变量,经过数据驱动来决定是否聚焦。小程序
优势:更加灵活,不受制于label的限制,只要是能修改到该绑定变量的任何动做,均可以聚焦
缺点:须要js介入,而label标签不须要函数
文档中input控件有四个原生事件spa
如今有个需求是将用户输入的金额,好比500,失去焦点以后显示为¥500,须要用到其中的bindinput
和bindblur
一开始我打算用一个讨巧的办法(不可行),由于看到bindinput
的说明中有一句3d
处理函数能够直接 return 一个字符串,将替换输入框的内容
因此我就在bindinput绑定的的方法里加上if(//失去焦点) return '¥'+ e.detail.value
失去焦点变量由bindblur
绑定的方法控制,伪代码为:
//记录失去焦点状态的变量改为true //调用bindinput绑定的方法,把event对象传入
没错,并无起做用。。。bindblur
绑定的方法调用不了bindinput
绑定的方法,就好像不能在其余函数调用生命周期函数同样code
还好还好,那就别用return了,老老实实经过bindinput
绑定的方法获取输入的值记录下来,bindblur
事件触发后把记录下来的值加工,而后把加工后的值传给和input控件value
属性绑定的变量。完美!component