公司有个文本框,当输入文字/粘贴/复制 或者是键盘猛按的时候,都希望这个文本框能统计出 输入了多少字

 

这种用 onchange   onkeyup  onkepress  都不怎么好使

 

最后在快要无语的情况下,使用了  下面的组合方式

 onkeyup="commMaxLength(this,30,'leftWordTitle')" oninput="commMaxLength(this,30,'leftWordTitle')" onpropertychange="commMaxLength(this,30,'leftWordTitle')"

有前辈说用jquery更风骚,于是下面发一个jquery的  (只写了 oninput  和 onpropertychange )

 

$('textarea').bind('input propertychange', function() {

    $('.msg').html($(this).val().length + ' characters');

});

如果不用jquery库,还可以这样

<head>

    <script type="text/javascript">

    // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9

        function OnInput (event) {

            alert ("The new content: " + event.target.value);

        }

    // Internet Explorer

        function OnPropChanged (event) {

            if (event.propertyName.toLowerCase () == "value") {

                alert ("The new content: " + event.srcElement.value);

            }

        }

    </script>

</head>

<body>

    Please modify the contents of the text field.

    <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />

</body>

最后是注释

1、onchange事件与onpropertychange事件的区别：
onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；onpropertychange事件却是实时触发，即每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件IE专有。
2、oninput事件与onpropertychange事件的区别：
oninput事件是IE之外的大多数浏览器支持的事件，在value改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过js改变value时，却不会触发；onpropertychange事件是任何属性改变都会触发的，而oninput却只在value改变时触发，oninput要通过addEventListener()来注册，onpropertychange注册方式跟一般事件一样。（此处都是指在js中动态绑定事件，以实现内容与行为分离）
3、oninput与onpropertychange失效的情况：
（1）oninput事件：a). 当脚本中改变value时，不会触发；b). 从浏览器的自动下拉提示中选取时，不会触发。
（2）onpropertychange事件：当input设置为disable=true后，onpropertychange不会触发。

 

知识链接 :http://www.zlovezl.cn/articles/12/

 

最牛叉的解决方法(真的是实时的,可以着重看看这个) http://polaris.blog.51cto.com/1146394/265667/

监听输入框值变化的最佳方案 oninput 和 onpropertychange (实时监控文本框改变的最佳方案)的更多相关文章

  1. 实时监听输入框值变化的完美方案：oninput & onpropertychange

    实时监听输入框值变化的完美方案:oninput & onpropertychange: 网址:http://www.cnblogs.com/lhb25/archive/2012/11/30/o ...

  2. HTML5 oninput实时监听输入框值变化的完美方案

    在网页开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理组合快 ...

  3. html5 实时监听输入框值变化的完美方案：oninput & onpropertychange

    结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. H5手机端: <input type="text" ...

  4. 实时监听输入框值变化：oninput & onpropertychange

    结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. oninput 是 HTML5 的标准事件,对于检测 textarea, i ...

  5. jquery实时监听输入框值变化

    在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条 ...

  6. 【转载】实时监听输入框值变化的完美方案：oninput & onpropertychange

    oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有 ...

  7. js/jquery 实时监听输入框值变化的完美方案：oninput & onpropertychange

    (1)     先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#username').bin ...

  8. js与jquery实时监听输入框值变化方法

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...

  9. Js/jQuery实时监听输入框值变化

    前言 在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能 ...

随机推荐

  1. 为什么不能使用Executors.newFixedThreadPool和newCachedThreadPool

    newFixedThreadPool的阻塞队列大小是没有大小限制的,如果队列堆积数据太多会造成资源消耗.newCachedThreadPool是线程数量是没有大小限制的,当新的线程来了直接创建,同样会 ...

  2. adb install使用说明

    [时间:2016-08] [状态:Open] [关键词:android, apk,adb install] 将apk安装到模拟器或者手机上. Pushes an Android application ...

  3. 单独的 python 脚本文件使用 django 自带的 model

    django1.9.5&python3.4.4 文件结构 在一个爬虫脚本中将爬取的数据通过django自带的model保存到数据库   修改的文件(其余pycharm新建Django项目生成, ...

  4. hdu1599(无向图的最小环模板)

    题意:杭州有N个景区,景区之间有一些双向的路来连接,现在8600想找一条旅游路线,这个路线从A点出发并且最后回到A点,假设经过的路线为V1,V2,....VK,V1,那么必须满足K>2,就是说至 ...

  5. 纯css3开发的响应式设计动画菜单（支持ie8）

    这是一个响应式设计的菜单.单击列表图标,当你显示屏大小可以完全水平放下所有菜单项时,菜单水平显示(如图1).当你的显示屏不能水平放置所有菜单项时,菜单垂直显示(如图2). 而且显示的时候是以动画的型式 ...

  6. eclipse mars 4.5.1 自定义工具栏

    window>>perspective>>Customize Perspective

  7. You have not concluded your merge (MERGE_HEAD exists) git拉取失败

    本文转自:http://yijiebuyi.com/blog/5b55eb51ad49ce41e2de9c85dd4513ca.html 今天获取git线上仓库代码报了这个错误: zhangzhi@m ...

  8. JDBC插入数据超长时无法自动截断问题

    问题 JDBC操作MySQL数据库,当进行插入或更新操作的数据长度超过表字段的声明最大长度时,会报出以下错误,导致不能正常插入: 但是当直接在MySQL客户端操作时,发现确实可以的,只不过会自动对插入 ...

  9. [转]python进行中文文本聚类（切词以及Kmeans聚类）

    简介 查看百度搜索中文文本聚类我失望的发现,网上竟然没有一个完整的关于Python实现的中文文本聚类(乃至搜索关键词python 中文文本聚类也是如此),网上大部分是关于文本聚类的Kmeans聚类的原 ...

  10. EhCache 配置信息

    How to Size Caches 官方文档:http://ehcache.org/documentation/configuration/cache-size [maxEntriesLocalHe ...