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

oninput事件适用于input\textarea\select元素,支持出IE外各大浏览器,该事件只有在键盘或者鼠标操作改变对象属性,只要属性发生变化就会触发事件,无需失去焦点。脚本触发无效;

onpropertychange属性可在某些情况下解决上面存在的问题,不用考虑是否失去焦点,不管js操作还是键盘鼠标手动操作,只要HTML元素属性发生改变即可立即捕获到。遗憾的是,onpropertychange为IE专属的。

可通过下面的方法进行测试,看效果:

<!DOCTYPE html>
<html>
<head>
<!-- redirect to the root krpano.html to avoid local browser restrictions -->
<meta charset="utf-8"/>
<title>input</title>
</head>
<body>
<input type="text" id="text" onchange="textChange()" onpropertychange="aa()">
<input type="date" id="date">
<input type="color" id="color" oninput="conColor()">
<input type="search">
<select id="select" oninput="selectChange()">
<option></option>
<option></option>
</select>
<textarea onchange="textareaChange()">wmen fjowgjksdjgsjlh;ruyssmngjshtuskgnvisysanhdi dhiynsgid是央视非得让公司和覅三个我们一起;AOI</textarea>
<script type="text/javascript">
window.onload=function(){
var text=document.getElementById("text");
text.value="";
}
function aa(){
var text=document.getElementById("text");
console.log(text.value);
}
function conColor(){
var color=document.getElementById("color");
console.log(color.value);
}
function textChange(){
var text=document.getElementById("text");
console.log(text.value);
}
function selectChange(){
var select=document.getElementById("select");
console.log(select.value);
}
function textareaChange(){
var textarea=document.getElementById("textarea");
console.log(textarea.text);
}
</script>
</body>
</html>

onchange、oninput、onpropertyChange事件的异同的更多相关文章

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

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

  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事件的用法和区别

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

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

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

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

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

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

    经本人测试在chrome下的从历史记录中选取值的时候也户触发input事件 前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过 ...

  8. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

  9. js监听文本框值变化事件,就oninput & onpropertychange & onkeyup & onchange的区别

    在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...

随机推荐

  1. 使用URL工具类调用webservice接口(soap)与http接口的实现方式

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...

  2. nagios安装全过程

    Nagios是一个用来监控主机.服务和网络的开放源码软件,可以在发生故障时发送报警短信和邮件,只要Nagios监控的对象发生故障,系统就会自动发送短信到手机上.所以应用十分广泛. Nagios is  ...

  3. ImageLoader的Jar包加载图片

    注意:需要添加权限,若缓存图片第二个必须要加 <uses-permission android:name="android.permission.INTERNET" /> ...

  4. <link rel="stylesheet" href="3.css"/> 链接方式

    <link rel="stylesheet" href="3.css"/> <!doctype html> <html> & ...

  5. Hrbustoj 2266 Legendary Weights(辗转相除求最大公约数)

    题意:这个题目的意思是给出一些砝码,问我们能不能根据这些砝码称量出任意重量的物品,最大公约数并不难求,难的在于如何建立这个模型. 思路:根据数论的基础知识,两个数a,b的最大公约数是a*x + b*y ...

  6. Python虚拟环境安装virtualenv

    解决了多个版本共存的问题 virtualenv 为每个不同项目提供一份 Python 安装.它并没有真正安装多个 Python 副本,但是它确实提供了一种巧妙的方式来让各项目环境保持独立. 安装vir ...

  7. LightOJ 1234 Harmonic Number 调和级数部分和

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1234 Sample Input Sample Output Case : Case : ...

  8. L8,the best and the worst

    expressions: enter for 报名参加,只有作为参加的意思的时候才会用for enter the room进入房间 a little prize for the worst garde ...

  9. 转 Android:sp与dp(densityDpi与scaledDensity)

    一般在布局上设置控件大小维度的单位采用dp,而定义字体大小的单位采用sp. dp是dip,density independent pixel,即密度无关的像素单位,说白了,就是这个维度相对于不同屏幕的 ...

  10. 用CSS让文字居于div的底部

    css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部 ...