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. linux 命令--sed

    简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(pattern space),接着用sed命令处理缓冲区中的内容,处 ...

  2. AutoTile 自动拼接（二） 学习与实践

    开始代码前,我们要做点准备工作. 下面 跟着我做. 首先我 扣了一个 图. 这个是 做 水的资源,所以是动态的,我把其余两张也扣了出来. 看起来一样,不是,这样看肯定 看不出所以然,你们先放到u3d中 ...

  3. 随笔css的样式

    div独占一行 span和div很相似但是span会随着内容的变化而改变宽度: p独占一行height:由字体撑开. a标签不支持宽和高需要加入dispaly:block: img,input,会排在 ...

  4. sql 指定范围 获取随机数

    DECLARE @nMinimumCount INT= 1DECLARE @nMaximumCount INT= 100SELECT abs(CHECKSUM(NEWID()))%(@nMaximum ...

  5. 学习笔记——Windows7下Android与Cocos2dx的安装配置

    1.下载eclipse.安卓SDK.配置ADT等,android开发必备,略. 2.下载NDK.Cocos2dx.Cygwin 2.1NDK下载,请下载对应的32位或者64的较大的压缩包(较小的只有t ...

  6. 让横向ul在页面中水平居中的方法

    在导航的布局中,导航条会用横向布局的ul li.如果要让其居中,怎么办呢? 第一种方法: ul{text-align:center;} li{display:inline} 这种方法不适合ie低版本. ...

  7. 多校 Babelfish

    题目链接:http://acm.hust.edu.cn/vjudge/contest/124435#problem/A 密码:acm Sample Input dog ogday cat atcay ...

  8. Image File Execution Options(转)

    今天公司的一台计算机无法正常工作送来维修,经简单判断是感染了很多病毒,即使在安全模式下也无法清除:于是将硬盘摘下挂到另外一台机器上,用卡巴斯基对病毒进行了查杀,再次启动计算机后发现很多系统维护程序以及 ...

  9. MediaScanner与音乐信息扫描==

    http://www.eoeandroid.com/forum.php?mod=viewthread&tid=98713 =================================== ...

  10. docker安装hadoop

    docker为hadoop的云化带来了极大便利,安装和应用也会更快更方便.进入正题: docker search hadoop 将会看到如下结果: INDEX NAME DESCRIPTION STA ...