一个小的功能,也体现了了这几天写程序过程中的遇到的一些常发事件,准备有时间研究一下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. MYSQL数据库约束类型

    07.14自我总结 MYSQL数据库约束类型 一.主键约束(primary key) 主键约束要求主键列的数据唯一,并且不能为空.主键分为两种类型:单字段主键和多字段联合主键. 1.单字段主键 写法 ...

  2. vue.js 中组件的使用

    Vue中组件的使用 方式一 1.使用Vue.extend创建组件 var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件& ...

  3. Python在office开发中的应用

    Python with Excel 有几个很好的Python模块能够方便地操作Excel的数据,包括读与写,不要求本地安装Excel.例如pandas, openpyxl, xlrd, xlutils ...

  4. 在 Windows 上搭建 PHP 网站

    PHP(全称:PHP:Hypertext Preprocessor,即“PHP:超文本预处理器”)是一种开源的通用计算机脚本语言,尤其适用于网络开发并可嵌入HTML中使用.PHP的语法借鉴吸收C语言. ...

  5. Linux内容点(部分)

    文件属性 -w      文件或目录,对目前(有效的)用户或组来说是可写的       -x       文件或目录,对目前(有效的)用户或组来说是可执行的       -o       文件或目录, ...

  6. DDMS 视图 Emulator Control 为灰色

    Emulator Control 模拟发送短信时,发现所有选项均为灰色,如图所示: 解决方法: 确认以下四种情形或方法 已测试 Genymotion 模拟器和真机均不行,而Eclipse自带模拟器可以 ...

  7. Linux基础进程管理优先级

    一.进程优先级 Linux进程调度及多任务 每个cpu(或者cpu核心)在一个时间点上只能处理一个进程,通过时间片技术,Linux实际能够运行的进程(和线程数)可以超出实际可用的cpu及核心数量.Li ...

  8. kubernetes集群升级的正确姿势

    kubernetes社区非常活跃,每季度都会发布一个release.但是线上集群业务可用性要求较高,场景复杂,任何微小的变更都需要非常小心,此时跟随社区版本进行升级略显吃力.但是为了能够使用到最新的一 ...

  9. mac下使用zerobrane调试cocos2dx的lua

    环境:MacOSx 10.9.2, Lua 5.1.4, luaSocket 2.0.2, xcode5.0.2 所需文件 luasocket-2.0.2.zip,ZeroBraneStudioEdu ...

  10. css常用代码块

    顶部固定导航栏 | css position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 48px; border-top ...