专注WEB开发 分享经验,沉淀知识

微信小程序获取input值的总结

 作者:chenxing  时间:2017-05-09 16:07  阅读:10006  评论:

这里我想重点总结input组件重要且常见的事件和属性,以及使用这些功能要注意的事项。

input在小程序是一个比较重要的组件,很多时候用户和服务器起的数据交互,大多数都是这个组件完成。不管在于UI、事件、和属性上,微信小程序对input组件都做了比较好的处理。

这里我想重点总结input组件重要且常见的事件和属性,以及使用这些功能要注意的事项。

input

一、属性

No1. type

微信小程序input组件的type值有四类:text,number,idcard,digit;默认为text。根据需求准确的使用类型能够达到两个目的,第一,是移动设备启用的键盘类型,你的input只是输入数字那么就选择用number,当你聚焦倒input的时候设备就只会为你开启数字键盘。这个就不用用整个键盘然后切换到数字区,这一个操作,能够极大的提供用户体验。第二,就是能够自动完成一些input的验证。比如说number,digit等就不用担心用户输入非数字类型,而做这类问题的验证,选择正确的类型能够很好的避免这些问题。

No2. maxlength

最大输入长度,设置为 -1 的时候不限制最大长度。基于上一个验证问题,这一个主要也是做一些input的表单验证属性,直接在属性中写,方便快速。

No3. placeholder

输入框为空时的占位符,这个还是比较常见,可以直接做为输入框的提示。能节省页面空间,不用额外的在input外面加文字说明这个input的该输什么值。注意是提示词,不是input的默认值。不过这个属性目前有点小bug,就是聚焦会重影抖动情况,如果你或者你的产品经理是一个处女做的话,那么这个属性目前应该和你们没关系了,不过相信微信在不久的将来肯定会解决这个bug。

二、事件

input 可以获取表单值可以使用的三个input事件

No1.bindinput

input输入时触发。值获取:e.detail.value。这个类似于input的keyup或者keydown事件处理方式。这个可以作为js直接获取input单个值。

No2.bindblur

input 输入焦点时触发。值获取:e.detail.value。注意,这个值只有失去焦点的时候才会被触发,获取单个值就要注意点,执行的顺序。比如,input下有一个提交按钮,js通过bindblur获取值将值传给提交事件上传服务器。如果用户输入完直接按下button按钮,那么失去焦点事件和提交事件几乎同是发生,会造成button提交过去的是一个空值。这个解决的方式是在提交事件的里执行提交接口设置一个定时器,进行缓冲。这个值可以500毫秒用户几乎感觉不到。这样我就完成了先失去焦点获取input值再提交数据的。

No3.blindcomfirm

bindconfirm 点击完成按钮时触发。值获取:e.detail.value。这个按钮是键盘中的右下角完成按钮,使用这个事件,input类型只能是text。数据类键盘没有这个按钮。

补充事件

还有一个form的bindsubmit事件可以获取单个或者一直表单的值。值获取:e.detail.value.[name]。

    <form bindsubmit="formSubmit">
        <input type="digit" name="amount" placeholder="请输入金额" />
        <button formType="submit">提交</button>
    </form>

以上是微信小程序常见属性和事件的总结。

除特别注明外,本网站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 https://www.qiusuoweb.com/36.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

一年时间又回到这里

 2019-07-27 16:54  38

PHP字符串转数组的三种场景

 2018-05-05 01:32  171

PHP如何遍历字符串?

 2018-05-04 00:56  744

api接口常见的安全问题和解决方案

 2018-05-03 23:20  685

 最新评论

 pagenoname: 08月24日 18:51
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里
 iceyxm: 05月16日 15:00
谜一样的问题,我也遇到了,能改的权限都改了,文件目录属主也改了,然而并没有作用
来源: thinkphp5的mkdir() Permission denied问题探讨
 potatog: 03月27日 15:02
厉害了厉害了,搞了半天我,
来源: thinkphp利用PHPExcel导出数据实践
 aaa: 02月10日 17:02
受教
来源: thinkphp如何有效的设置session过期时间
 风格: 01月17日 09:35
我也是没解决
来源: thinkphp5的mkdir() Permission denied问题探讨
 小胡: 01月14日 14:28
非常感谢!使用非常便捷~
来源: thinkphp利用PHPExcel导出数据实践