微信小程序中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中的array数组使用技巧
Jan 31 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 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做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
python文件名和文件路径操作实例
2017/09/29 Python
Django实现表单验证
2018/09/08 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
Django学习之文件上传与下载
2019/10/06 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
北京SQL新华信咨询
2016/09/30 面试题
简历中自我评价怎么写
2014/02/12 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
html5调用摄像头实例代码
2021/06/28 HTML / CSS
科普 | 业余无线电知识-波段篇
2022/02/18 无线电