微信小程序中input标签详解及简单实例


Posted in Javascript onMay 18, 2017

微信小程序中input标签详解及简单实例

使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用:
我就用我最常用的来做例子:

一个一个来解读:

首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 
第二,设置他的样式, 
第三,设置他的输入类别,以上都是很简单的 
第四。使用正则l;哎限定输入为纯数字。这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉。注意,是对整个,不是经行筛选。 
第五,限制他的输入最多6位数 
第六输入事件监听。这是微信专属的,他的事件下面会给出 
第七,设置当输入框为空的时候他的‘提示语';

bindinput事件:

bind,顾名思义是绑定,绑定input输入

事件如下:

tapevent:function(e){
  // 减少的时候
  if (e.target.id =="increase"){
this.data.tickets++;
this.setData(this.data);
  }
  else {
   this.data.tickets--;
   this.setData(this.data);
  }
  // 在这里修改总额
 },

这是节选,所以先不要好奇怎么运行到这一段的,看得出来。tapevent被定义为一个function。并且在这经行操作,感觉微信跟Android差不多。都是靠刷新页面来的。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
javascript、php关键字搜索函数的使用方法
May 29 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 #Javascript
JavaScript运动框架 多值运动(四)
May 18 #Javascript
微信小程序页面开发注意事项整理
May 18 #Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 #Javascript
微信小程序网络请求wx.request详解及实例
May 18 #Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 #Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 #Javascript
You might like
PHP中文件上传的一个问题
2010/09/04 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
JsRender for object语法简介
2014/10/31 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
JS计算距当前时间的时间差实例
2017/12/29 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
django之session与分页(实例讲解)
2017/11/13 Python
Python实现的购物车功能示例
2018/02/11 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
Django中提示消息messages的设置方式
2019/11/15 Python
python中count函数简单用法
2020/01/05 Python
Python递归实现打印多重列表代码
2020/02/27 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
澳大利亚百货公司:David Jones
2018/02/08 全球购物
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
会计系毕业生求职信
2014/05/28 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
学生党员检讨书范文
2014/12/27 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫