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. mysql 货币字段类型的存储

    loat类型是可以存浮点数(即小数类型),但是float有个坏处,当你给定的数据是整数的时候,那么它就以整数给你处理.这样我们在存取货币值的时候自然遇到问题,我的default值为:0.00而实际存储 ...

  2. HDU 4738 Caocao's Bridges（割边）

    乍一看一个模板题,仔细一看还是模板题,但是三个坑.1,不是连通图,放0个.2 守卫为0,放1个. 3注意重边. #include<iostream> #include<cstdio& ...

  3. 清北学堂入学测试P4751 H’s problem(h)

    P4751 H’s problem(h)  时间: 1000ms / 空间: 655360KiB / Java类名: Main 背景 冬令营入学测试 描述 小H是一个喜欢逛街的女孩子,但是由于上了大学 ...

  4. SlidingMenu的使用，结合Fragment（eclipse环境）

    首先下载SlidingMenu,有Library和Sample,然后在自己的项目中引入类库(引入智慧北京工作空间的Library),然后V4包会发生冲突,删掉自己项目Libs目录下的V4包即可 侧滑布 ...

  5. Bootstrap Modal 垂直居中

    Bootstrap 的 modal 正文中如果内容较少的话,并不会垂直居中,而是偏上, 如果想要达到垂直居中的效果,需要自动动手了. 可以在初始显示时设置垂直居中,可以这样做: $('#YourMod ...

  6. attach

    http://bbs.chinaunix.net/thread-2091967-1-1.html 大概跟父进程,子进程,信号等有关,一个没有操作系统的赤裸裸的单片机上是不可以attach的.

  7. 数据的软删除-管理员的CRUD

    数据的“软删除”---把数据真正删除在某些时候会有问题.IsDeleted字段,false表示不删除,而是让用户可以看到,true表示是软删除,用户看不到. 一个表引用另外一张表的时候一定要引用主键. ...

  8. 设置span 宽度的完美解决方案

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Android--->activity界面跳转，以及查看生命周期过程

    main.xml界面布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...

  10. 5个简单的步骤把 WordPress 打造成 CMS

    可能网站的首页一直是一成不变的博客样子,有时候也会挺闷的,个人觉得首页就是应该把博客中最好最重要的内容展现给读者,基于这个想法,我们可以把博客的首页改成一个非常简单的 CMS 首页. 基于 WordP ...