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在处理复制.粘贴.拖拽.长按键(按住键盘不放)等细节上 ...
随机推荐
- 个人永久性免费-Excel催化剂功能第57波-一键生成完全组合的笛卡尔积结果表
在数据库的多表查询中,通常会有各种连接关系,同样地在Excel环境中,也有很大的场景需要用到类似数据库的多表查询,如经典的VLOOKUP就是其中一种类似LEFT JOIN查询的查询效果.在很多时候需要 ...
- CF1195C Basketball Exercise (dp + 贪心)
题解出处:https://www.luogu.org/problemnew/solution/CF1195C 很水的一道C题……目测难度在黄~绿左右.请各位切题者合理评分. 注意到可以选择的球员编号是 ...
- python模块导入-软件开发目录规范-01
模块 模块的基本概念 模块: # 一系列功能的结合体 模块的三种来源 """ 模块的三种来源 1.python解释器内置的模块(os.sys....) 2.第三方的别人写 ...
- Visual Studio 调试系列1 Debug 与 Release 模式
系列目录 [已更新最新开发文章,点击查看详细] Debug 模式 Debug 通常称为调试版本,它包含调试信息,并且不作任何优化,便于程序员调试程序. 在Debug模式下调试,可以在断点处看到 ...
- C#写好的类库dll在别人调用的时候也能看到注释的方法
1.用///的方法添加注释 2.项目的属性里面,要选上"生成XML注释文档" 菜单 Project -> 'xxxx' Properties -> Build -> ...
- linux初学者-网络桥接篇
linux初学者-网络桥接篇 在网络的使用中,有时需要搭建网络桥来实现网络桥接.例如在一台主机上制作一台虚拟机,虚拟机是没有物理网卡的,这时虚拟机数据的发送和接收就需要通过主机上的物理网卡,需要主机的 ...
- centos7更新yum库为aliyun库
1. 备份原来的yum源$sudo cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak 2.设置ali ...
- 【转】解决eclipse连接不到genymotion的问题
(1)很多朋友在使用genymotion开发安卓应用程序的时候,会遇见完全正确的安装但是在运行的时候仍然找不到,genymotion上的设备,在打开的devices上找不到如下图所示: (2)解决的方 ...
- 最火的分布式 HTAP 数据库 TiDB - 入门实践教程
偶然在某篇博客看到了 TiDB,一个融合 OLTP 和 OLAP 的分布式开源数据库, GitHub 上 Star 很多,然后 watch 了,发现 commit 和 pull request 一直都 ...
- 隐马尔科夫模型HMM介绍
马尔科夫链是描述状态转换的随机过程,该过程具备“无记忆”的性质:即当前时刻$t$的状态$s_t$的概率分布只由前一时刻$t-1$的状态$s_{t-1}$决定,与时间序列中$t-1$时刻之前的状态无关. ...