input的onchange 和oninput事件
一个小的功能,也体现了了这几天写程序过程中的遇到的一些常发事件,准备有时间研究一下jQuery和原生js,问题的出现:使用jQuery获取到的节点到底是属于什么,有些事件
居然不能用,就如我今天用到的事件 onchange 和oninput ,还有对于onclick 和click,
先总结一下这个小小的功能:输入框要输入money,那就只有两位小数,我们要确保输多位小数时,不让他提交,提交按钮变灰色,当小数点后是两位则回复按钮状态,
onchange事件,监听input 输入的值是否符合要求,不符合则改变按钮状态:代码如下:
bid.onchange=function(){
var num = bid.value;
var dot = num.split('.');
if(dot[1]!=null){ if(dot[1].length>2){
var addbtn = document.getElementById("addbtn");
addbtn.setAttribute("disabled",true);
alert("请保留两位小数");
}
}
}
oninput事件,随时监听input输入的值,小数点后的位数,当时两位时,按钮回复状态:代码如下:
bid.oninput=function(){
var num = bid.value;
var dot = num.split('.');
if(dot[1]!=null){ if(dot[1].length<=2){
var addbtn = document.getElementById("addbtn");
addbtn.removeAttribute("disabled");
}
}
};
说一下两个事件的区别:onchange 当文本框失去焦点时,检查input里的值是否符合要求,执行函数
oninput 实时监听文本框的值,不符合要求事件触发,(但是虽不符合要求,值却已经在文本框了)这就为什么两个事件得同时用
待续。。。jQuery和原生js 对事件的操作支持:
这篇文章的前部分很早就写完了,最近才明白了,不是jquery和js的问题,是DOM的问题,以前没意识到这个问题,最近搞清楚了(和别人讨论问题时,提到了)恍然大悟,犹如醍醐灌顶值功效。哈哈,感觉使用jquery瞬间轻松了好多,这种感觉是只有个我这种菜鸟才能感受的。
首先,jquery和DOM 他们各自的属性方法是不能混用的,简单说,jquery是方法,DOM是属性,
我们使用dom获取属性节点,使用jquery方法操作节点,和平共处。
然后,就涉及相互转换的问题,看了一些资料,表达一下自己最切实的理解。
使用$("**")获取节点,就是jquery对象,使用jquery的方法属性,
使用$("**")[index]这样,就变成了DOM对象,使用DOM方法和属性。
使用$($("**")[index]),转换成jquery对象,使用jquery的方法。
三句切实理解jquery和DOM的操作方式,希望以后在前端的道路上,勇往直前!
有什么问题,欢迎吐糟,共同进步!
<h2>现阶段目标:能用代码量解决的问题,就不是问题!</h2>
最新文章
- 2017年";程序媛和工程狮";绝对不能忽视的编程语言、框架和工具
- EntityFramework之摸索EF底层(八)
- 【SQL】Oracle分页查询的三种方法
- 合理利用gradle的占位符功能
- Shell最多可以输入多少个参数?
- odoo定时任务
- bzoj 3517: 翻硬币
- Android要点记录
- Mybatis bug修正
- C# 读取XML文件示例
- 取汉子拼音首字母的C#和VB.Net方法
- rsync 自动创建目录的坑点
- java I/O (一)
- 原生aspx页面如何引用公共js和css
- vue插件官方文档,做个记录
- Offset Management For Apache Kafka With Apache Spark Streaming
- Linux-逻辑卷LVM
- Python之random模块
- 2016ACM/ICPC亚洲区沈阳站 - A/B/C/E/G/H/I - (Undone)
- Steam API调试