一个小的功能,也体现了了这几天写程序过程中的遇到的一些常发事件,准备有时间研究一下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事件的更多相关文章

  1. JavaScript 使用HTML DOM的oninput事件,实时监听value值变化

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测

    这几天项目着急,同时也学到好多以前没有接触过的知识.oninput.onchange与onpropertychange事件的区别, 与input输入框实时检测 onchange事件只在键盘或者鼠标操作 ...

  3. 总结oninput、onchange与onpropertychange事件的用法和区别,onchange

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

  4. 总结oninput、onchange与onpropertychange事件的用法和区别 书写搜索的神奇代码

    总结oninput.onchange与onpropertychange事件的用法和区别 最近手机开发一个模糊搜索的功能组建,在网上就找到这篇文章! 前端页面开发的很多情况下都需要实时监听文本框输入,比 ...

  5. onchange、oninput、onpropertyChange事件的异同

    onchange事件适用于input\textarea\select元素上,支持各大浏览器,该事件只有在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效: oninput事件适用于inpu ...

  6. 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

  7. 总结oninput、onchange与onpropertychange事件的用法和区别

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

  8. oninput事件和onchange事件区别

    onchange事件 触发条件:在域内容更改时触发,也可用于单选框和复选框改变后触发 作用对象:select.input.textarea oninput事件 触发条件:在域内容更改时触发(严格说在用 ...

  9. 总结oninput、onchange与onpropertychange事件的使用方法和差别

    onchange事件仅仅在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效:而onkeydown/onkeypress/onkeyup在处理复制.粘贴.拖拽.长按键(按住键盘不放)等细节上 ...

随机推荐

  1. java优化之 单例模式的优化

    该分类下的文章均为笔者阅读<Java程序性能优化>(葛一鸣)一书之所理解.如有欠缺,还请大佬们指点.

  2. Java中的I/O输入输出流概述

    流是一组有序的数据序列,根据操作类型,可以分为输入流和输出流两种,Java语言中定义的负责各种输入输出的类都被放在java.io包中.其中所有的输入流类都是抽象类InputStream(字节输入流)或 ...

  3. 六、SQL 多张表数据叠加到一个视图里面

    1 create view vABC as select * from a,b,c where a.id = b.aid and b.id = c.bid ---------------------- ...

  4. 【git】15分钟学会使用Git和远程代码库

    Git是个了不起但却复杂的源代码管理系统.它能支持复杂的任务,却因此经常被认为太过复杂而不适用于简单的日常工作.让我们诚实一记吧:Git是复杂的,我们不要装作它不是.但我仍然会试图教会你用(我的)基本 ...

  5. 【Arduino】66种传感器系列实验(1)---干簧管传感器模块

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和各种模块,依照实践(动手试试)出真知的理念,以学习和交流为目的,这里 ...

  6. .NET Core CSharp初级篇 1-8泛型、逆变与协变

    .NET Core CSharp初级篇 1-8 本节内容为泛型 为什么需要泛型 泛型是一个非常有趣的东西,他的出现对于减少代码复用率有了很大的帮助.比如说遇到两个模块的功能非常相似,只是一个是处理in ...

  7. C#中谁最快:结构还是类?

    前言 在内存当道的日子里,无论什么时候都要考虑这些代码是否会影响程序性能呢? 在现在的世界里,几乎不会去考虑用了几百毫秒,可是在特别的场景了,往往这几百毫米确影响了整个项目的快慢. 通过了解这两者之间 ...

  8. PC端触底效果反复触发的解决方案

    最近在做一个PC端的项目,要求是在滑动到页面的底部的时候就动态的加载下一页的数据,代码实现思路如下: 首先,我们需要知道浏览器中有三个高度,分别是屏幕高度(outerHeight),文档容器高度(in ...

  9. Selenium+java - 下拉框处理

    常见下拉框也分两种:一种是标准控件和非标准控件(一般为前端开发人员自己封装的下拉框),本篇文章中将重点讲解标准下拉框操作. 1.Select提供了三种选择某一项的方法 select.selectByI ...

  10. prometheus-kafka-exporter部署

    chart地址:https://gkarthiks.github.io/helm-charts/charts/prometheus-kafka-exporter/ 1.下载chart $ helm r ...