小程序input控件

nifhlheimr 发布于2019-08-26 12:15 / 2166人阅读

摘要：小程序的是经过封装的，封装后已经是块级元素，而不是原来的行内元素。那怎么办呢，小程序怎么实现类似的这种绑定还好还好，小程序关上了一扇门，还是打开了一扇窗控件自带一个属性，为时聚焦，时失去焦点。

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

类似label绑定的方法

按一贯的套路，给input加个label标签绑定，然而发现并不行。
翻看文档，发现只能绑定4种控件。。。

那怎么办呢，小程序怎么实现类似label的这种绑定？
还好还好，小程序关上了一扇门，还是打开了一扇窗！
input控件自带一个focus属性，为true时聚焦，false时失去焦点。详看小程序input
所以可以通过给focus绑定一个变量，通过数据驱动来决定是否聚焦。

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

小程序input的绑定事件

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

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

处理函数可以直接 return 一个字符串，将替换输入框的内容
所以我就在bindinput绑定的的方法里加上 if(//失去焦点) return "￥"+ e.detail.value 
失去焦点变量由bindblur绑定的方法控制，伪代码为：

//记录失去焦点状态的变量改成true
//调用bindinput绑定的方法，把event对象传入

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

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

云服务器 GPU云服务器 input控件小程序小程序小程序附近小程序门店小程序小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108338.html

【Angularjs文档翻译及实例】表单指令集（input）

摘要：设置了属性，清空一下内容查看效果设置了属性，增加内容查看效果运行效果以及用法其中以及请参照的参数列表，下面，仅列出与上个控件不同的参数。最近在看Angular的知识，无论是书中还是网上，讲解跟表单有关的指令集都是点到为止，讲些基础验证，比如，是否为空，是否为email地址，更多的并没有讲解，但是，当我查看Angular的官方文档时，发现与input控件相关的指令集真的很丰富，有关HT...

reclay 2019-08-19 17:43 评论0 收藏0
小小标签，强大功能——深藏不露的 <input>

摘要：属性在标签中，属性可指定显示不同的表单控件，每个控件都有不同的目的和收集特定类型的数据。传统做法是使用框架如，而推出了标签的新值属性。目前几乎所有的应用程序的表单都涉及到日期选择器，如预约医生航班等，虽然可能是不同的形式。虽只是一个看似简单的 HTML 表单元素，但它这么一个单一的元素，就有多达 30 多个属性（attribute），相信无论你是个小菜鸟还是像我一样写了 15 年 ...

wuaiqiu 2019-08-01 14:43 评论0 收藏0
从前端界面开发谈微信小程序体验

本文由云+社区发表作者介绍：练小习，2011年加入搜狐，负责搜狐相册的产品策划与前端开发。2015年后加入腾讯 ISUX (社交用户体验设计部)，目前主要负责腾讯云的UI开发工作，专注于人机交互，有丰富的UI开发经验。这段时间有幸加入了一个关于微信小程序的项目开发组，从无到有的根据文档自行学习了小程序的开发过程，前面已经有几位前辈的文章珠玉在前，我这里就先从前端界面的开发方面谈一谈小程序以及我...

NoraXie 2019-08-23 14:23 评论0 收藏0