微信小程序中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 相关文章推荐
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
理解javascript中DOM事件
Dec 25 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
Vue.js用法详解
Nov 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
PHP7 标准库修改
2021/03/09 PHP
jquery $.ajax相关用法分享
2012/03/16 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
Python实现的石头剪子布代码分享
2014/08/22 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
美国创意之家:BulbHead
2017/07/12 全球购物
社区党总支书记先进事迹材料
2014/01/24 职场文书
运动会通讯稿100字
2014/01/31 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
Python进程池与进程锁之语法学习
2022/04/11 Python
一文搞懂Java中的注解和反射
2022/06/21 Java/Android
SpringBoot Http远程调用的方法
2022/08/14 Java/Android