微信小程序中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构造函数和原型对象
Sep 23 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
VUE长按事件需求详解
Oct 18 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
vue+Element-ui前端实现分页效果
Nov 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
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
VUE脚手架具体使用方法
2019/05/20 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
python判断自身是否正在运行的方法
2019/08/08 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
年终总结会主持词
2014/03/25 职场文书
联谊活动总结范文
2015/05/09 职场文书
社区服务活动感想
2015/08/11 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
golang实现浏览器导出excel文件功能
2022/03/25 Golang