小程序input控件

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

类似label绑定的方法

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

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

小程序input的绑定事件

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

clipboard.png

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

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

没错,并没有起作用。。。bindblur绑定的方法调用不了bindinput绑定的方法,就好像不能在其他函数调用生命周期函数一样

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值