微信小程序中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 相关文章推荐
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
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 addslashes和mysql_real_escape_string
2010/01/24 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
php画图实例
2014/11/05 PHP
字符串的replace方法应用浅析
2011/12/06 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
九年级历史教学反思
2014/01/27 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL