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在处理复制.粘贴.拖拽.长按键(按住键盘不放)等细节上 ...
随机推荐
- python,看看有没有你需要的列表元祖和range知识!
列表--list 列表:列表是python的基础数据类型之一,存储多种数据类型 可变 支持索引 可切片 方便取值 li = ['alex',123,Ture,(1,2,3,'wusir'),[1,2, ...
- 全栈工程师知识点汇总——html5(上)
一.HTML5 1.新特性: 1. 取消了过时的显示效果标记 <font></font> 和 <center></center> ... 2. 新表单元 ...
- 个人永久性免费-Excel催化剂功能第74波-批量排版格式利器,瞬间美化表格
PPT和WORD的世界,充满着排版的美化操作,在Excel世界同样也需要对表格.图表的美化,此篇带你进入真正的制表专家行列,使用Excel催化剂的格式管理增强功能加上对美感的艺术造诣,对Excel表格 ...
- cookbook_模块和包
1把模块按层次结构组织成包 只需确保每个目录中都定义了__init__.py即可. 2对所有符号的导入进行精确控制 当用户使用from module import * 语句时,我们希望对从模块或包中导 ...
- ios下,微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样
问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...
- 关于STM32GPIO按键上下拉配置的认识
说真的,后知后觉这个问题还是有点值得研究的,一开始学习我用的板子在按键模块电路中GPIO输入脚是有外部上下拉电阻的,如下图所示:当KEY1接V3.3,在其后为它接一个下拉电阻,可以保证按下按键输入高电 ...
- 雪花算法【分布式ID问题】【刘新宇】
分布式ID 1 方案选择 UUID UUID是通用唯一识别码(Universally Unique Identifier)的缩写,开放软件基金会(OSF)规范定义了包括网卡MAC地址.时间戳.名字空间 ...
- 全文检索方案Elasticsearch【Python-Django 服务端开发】
更详细请看 https://www.elastic.co/cn/ 1. 全文检索和搜索引擎原理 商品搜索需求 当用户在搜索框输入商品关键字后,我们要为用户提供相关的商品搜索结果. 商品搜索实现 可以选 ...
- Vue组件间通信-Vuex
上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex.Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库). 首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了.我是通过 ...
- 当下最流行的微服务与spring cloud,你搞清楚了吗?
微服务架构:Spring-Cloud 什么是微服务? 微服务就是把原本臃肿的一个项目的所有模块拆分开来并做到互相没有关联,甚至可以不使用同一个数据库. 比 如:项目里面有User模块和Power模块, ...