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>
input的onchange 和oninput事件的更多相关文章
- JavaScript 使用HTML DOM的oninput事件,实时监听value值变化
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测
这几天项目着急,同时也学到好多以前没有接触过的知识.oninput.onchange与onpropertychange事件的区别, 与input输入框实时检测 onchange事件只在键盘或者鼠标操作 ...
- 总结oninput、onchange与onpropertychange事件的用法和区别,onchange
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- 总结oninput、onchange与onpropertychange事件的用法和区别 书写搜索的神奇代码
总结oninput.onchange与onpropertychange事件的用法和区别 最近手机开发一个模糊搜索的功能组建,在网上就找到这篇文章! 前端页面开发的很多情况下都需要实时监听文本框输入,比 ...
- onchange、oninput、onpropertyChange事件的异同
onchange事件适用于input\textarea\select元素上,支持各大浏览器,该事件只有在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效: oninput事件适用于inpu ...
- 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- 总结oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- oninput事件和onchange事件区别
onchange事件 触发条件:在域内容更改时触发,也可用于单选框和复选框改变后触发 作用对象:select.input.textarea oninput事件 触发条件:在域内容更改时触发(严格说在用 ...
- 总结oninput、onchange与onpropertychange事件的使用方法和差别
onchange事件仅仅在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效:而onkeydown/onkeypress/onkeyup在处理复制.粘贴.拖拽.长按键(按住键盘不放)等细节上 ...
随机推荐
- [leetcode] 621. Task Scheduler(medium)
原题 思路: 按频率最大的字母来分块,频率最大的字母个数-1为分成的块数,每一块个数为n+1 比如AAABBCE,n=2, 则分为A-A- +A AAABBBCCEE,n=2,则分为AB-AB- +A ...
- Visual Studio 2015 WinForm应用程序打包教程
最近开发了一个小软件.由于需要打包.网上找了一些资料.然后整合了起来.希望对大家有所帮助.不全面请见谅. 本人开发工具用的是Visual Studio 2015 打包控件 InstallShield ...
- java练习---8
//程序员:罗元昊 2017.10.16 题目3.7 import java.util.Scanner; public class L { @SuppressWarnings("resour ...
- idea使用技巧总结
1.idea代码自动补全 https://jingyan.baidu.com/article/36d6ed1f62e9821bcf4883af.html 2.优化_生成main方法_sysout方法 ...
- Java面向对象16种原则
一 类的设计原则 1 依赖倒置原则-Dependency Inversion Principle (DIP) 2 里氏替换原则-Liskov Substitution Principle (L ...
- abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十一)
abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
- python输出九九乘法表
1.脚本如下 (1)倒三角格式的,注意行前的空格 for i in range(1,10): for j in range(i,10): print("%d*%d= ...
- C#使用OLEDB方式读取EXCEL,表的结构
var tables = con.GetOleDbSchemaTable(System.Data.OleDb.OleDbSchemaGuid.Tables, new object[] { }); Ta ...
- GitHub 用户排行榜
排行榜预览网址:Github | Githack | UNPKG | Gitee Github 中国用户排名,全球仓库 Star 最多排名,通过 Github API v3 来生成页面数据,排行榜预览 ...
- iOS程序员 如何提升核心竞争力,防止自己被裁员?
前言: 核心竞争力最早由普拉哈拉德和加里·哈默尔两位教授提出,通常认为核心竞争力,即企业或个人相较于竞争对手而言所具备的竞争优势与核心能力差异, 说白了就是你的优势,而且最好是独一无二的的优势,这就是 ...