微信小程序中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 相关文章推荐
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
详解Vue之计算属性
Jun 20 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 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实现可逆加密的方法
2015/08/11 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
详解PHP队列的实现
2019/03/14 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
python交易记录链的实现过程详解
2019/07/03 Python
Python笔试面试题小结
2019/09/07 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
一个入门级python爬虫教程详解
2021/01/27 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
聘任书格式及范文
2015/09/21 职场文书
请假条应该怎么写?
2019/06/24 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
Java 写一个简单的图书管理系统
2022/04/26 Java/Android
Redis实现订单过期删除的方法步骤
2022/06/05 Redis