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在处理复制.粘贴.拖拽.长按键(按住键盘不放)等细节上 ...
随机推荐
- 【Android UI】顶部or底部菜单的循环滑动效果一
实现了分页的滑动效果,做的demo流畅运行 注:貌似支持的样式(控件)有一定的限制,我试过短信的listview页面,暂无法实现滑动效果 java文件:MainActivity.java.Activi ...
- 简单分析线程获取ReentrantReadWriteLock 读锁的规则
1. 问题 最近有同事问了我一个问题,在Java编程中,当有一条线程要获取ReentrantReadWriteLock的读锁,此时已经有其他线程获得了读锁,AQS队列里也有线程在等待写锁.由于读锁是共 ...
- Cesium 学习(三)各种资源链接
1.前言 前面已经介绍如何获得以及安装部署Cesium,接下来分享下学习资源链接,其中访问最多的是官网以及超图.火星的demo网站. 2.官网地址及介绍 官网:https://cesiumjs.org ...
- 小白学python-day01-电脑结构知识
作为一个”0“基础的经济学学士来说,专业分类选择了经统,多多少少和计算机有点关系,从今天开始学习python. 但行努力,莫问前程. day01学习电脑结构等知识. 因为这些知识是 有规则的,客观的文 ...
- HTML--CSS样式表的基本概念
CSS(Cascading Style Sheet 叠层样式表) 作用:美化HTML网页 (一)样式表分类 一.内联样式表 和HTML联合显示,控制精准,但是可重用性差,冗余多. 例如:<p ...
- ioc和aop的区别
IoC,(Inverse of Control)控制反转,其包含两个内容:其一是控制,其二是反转.在程序中,被调用类的选择控制权从调用它的类中移除,转交给第三方裁决.这个第三方指的就是Spring的容 ...
- mybatis动态插入数据库
<insert id="dynamicAddUser"> insert into t_user <!-- trim 对所有的表中列名 进行动态处理 --> ...
- poj2909 欧拉素数筛选
刚刚学了一种新的素数筛选法,效率比原先的要高一些,据说当n趋近于无穷大时这个的时间复杂度趋近O(n).本人水平有限,无法证明. 这是道水题,贴代码出来重点是欧拉筛选法.我把原来普通的筛选法贴出来. / ...
- 【pycharm】pycharm远程连接服务器的Python解释器,远程编写代码!!!
今天讲讲如何用pycharm连接远程服务器,使用远程服务器的Python解释器,比如说是你公司的服务器,在家里就可以编写或修改项目的代码! 第一步,先找到服务器上的ip地址 Linux查看IP命令:i ...
- 基于 Autojs 的 APP、小程序自动化测试 SDK - 2019年8月3日
原文:https://blog.csdn.net/laobingm/article/details/98317394 autojs sdk基于 Autojs 的 APP.小程序自动化测试 SDK,支持 ...