微信小程序中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 相关文章推荐
JavaScript 原型继承
Dec 26 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
smarty内置函数config_load用法实例
2015/01/22 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
小型js框架veryide.librar源代码
2009/03/05 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
python求crc32值的方法
2014/10/05 Python
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
python装饰器代替set get方法实例
2019/12/19 Python
Python类继承和多态原理解析
2020/02/05 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
简约控的天堂:The Undone
2016/12/21 全球购物
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
证婚人经典证婚词
2014/01/09 职场文书
秋季运动会通讯稿
2014/01/24 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python