小程序input控件

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

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

小程序的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属性绑定的变量。完美！

私有云专线服务 input控件小程序小程序小程序附近小程序门店小程序小程序

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

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

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

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

reclay 2019-08-19 17:43 评论0 收藏0
SMTC：灵光乍现解决移动端保持键盘打开状态

摘要：主要的一个细节问题输入控件的光标闪烁按钮要有按钮的样子，获取焦点后有个闪烁光标总是不合时宜的解决方案异常简单，把焦点再重置到原输入控件关于按钮样式，鼠标事件响应及反馈这种小问题，大家自己搞定吧下面是基本实现，供参考请输入内容发送之前看到问题小程序点击发送保持键盘打开状态按常规答了一下点击按钮的处理，最后让输入框重新获取焦点，应该就可以小程序里应该是有个 focus 属性，...

whatsns 2019-08-05 15:47 评论0 收藏0
小小标签，强大功能——深藏不露的 <input>

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

xiaolinbang 2019-08-02 18:07 评论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