jquery的实时触发事件(textarea实时获取中文个数)

(2014-09-16 11:49:50)

因为onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。
 
如果你需要即时监听输入框值的变化,建议使用 onpropertychange 事件!
 
在IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获。
 
在非IE浏览器可以用 oninput 事件来监听。
 
举例如下:
<input name='mytext' id='mytext' />
 
 
function immediately(){
var element = document.getElementByIdx_x("mytext");  \/\/获取元素对象
if("\v"=="v") {  \/\/判断是否IE浏览器
 
     if(/msie/i.test(navigator.userAgent)) alert('IE Browser');    \/\/ie浏览器 
 
     element.onpropertychange = myfun;   \/\/ IE的话添加onpropertychange 事件
}else{
     element.addEventListener("input",myfun,false);  \/\/非IE的话用 addEventListener 添加监听事件
}
function myfun(){
     alert(document.getElementByIdx_x('mytext').value);
}
}
 
上面是JS函数的写法~直接在页面的话就是:
<input type="text" name="mytext" oninput="alert(this.value);" onpropertychange="alert(this.value)" />
 
 
当然上面的操作步骤比较繁琐可以直接使用jquery的方式来调用。
 
这是用jquery写的判断中文输入字符的个数方法:
$(document).bind('propertychange input', function () {  
        var counter = $('#content').val().length;
        $('#tips var').text(300 - counter);    \/\/每次减去字符长度
});
 
 
补充回答:
再补充下关于几个事件的区别:
 
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不会触发。

jquery的实时触发事件(textarea实时获取中文个数)的更多相关文章

  1. DataGridView DataGridViewCheckBoxColumn编辑时实时触发事件

    正常响应CellValueChanged()事件时,当改变checkbox状态时,只有当焦点离开该单元格时才能触发CellValueChanged()事件, 如果要改变checkbox值时实时触发Ce ...

  2. js和jquery中的触发事件

    改别人的坑,遇到jquery选择器和fireEvent混用,不认识fireEvent方法报错. js的方法不能使用jquery的选择器去调用. 1.fireEvent (IE上的js方法 ) 我们来看 ...

  3. JQuery 自己主动触发事件

    经常使用模拟 有时候,须要通过模拟用户操作,来达到单击的效果.比如在用户进入页面后,就触发click事件,而不须要用户去主动单击. 在JQuery中.能够使用trigger()方法完毕模拟操作.比如能 ...

  4. window.event.srcElement与window.event.target 触发事件的元素 触发事件对象的获取,window.event与时间函数参数的event是同一个 事件对象

    判断事件触发的元素:     var tag = window.event.target || window.event.srcElement;    if (tag.tagName.toLowerC ...

  5. jquery实现回车键触发事件

    键盘事件有3: keydown,keypress,keyup,分别是按下,按着没上抬,上抬键盘 . 正确代码为: $(document).keyup(function(event){ if(event ...

  6. javaScript 的option触发事件

    先说jquery的option触发事件,很方便 $("option:selected")//这样就能直接触发选择的option了 在JavaScript中就显得比较麻烦,其实< ...

  7. 主动触发事件 自定义事件 trigger 及其用法

    1. 触发自定义事件方式 js.jq 2. jq 触发 2.1 默认支持的事件 $('#h').on('click',function(){ $(this).append('<p>p< ...

  8. 发现:Click事件也能获取鼠标单击的坐标

    按照MSDN的说明以及平时的习惯,我们要获取鼠标单击时的相对坐标,都会使用MouseClick等事件,今天,偶然发现,原来Click事件也可以. /* 惊天地泣鬼神的考古业绩. * 原来Cilck事件 ...

  9. jQuery实时监听input的值变化(input的值产生变化才会触发事件)

    //用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) { return this.ea ...

随机推荐

  1. linux下部署python项目到jenkins

    环境:linux+jenkins+tomcat+git+python3.7 1.安装jdk 上传安装包到usr/local 解压 配置环境变量 vim /etc/profile export JAVA ...

  2. oracle之三备份恢复概述

    备份恢复概述 1.1 数据库故障的类型: 1)user process failure: pmon 自动处理 2)instance failure: smon 自动处理 3)user errors : ...

  3. java Spring系列之 配置文件的操作 +Bean的生命周期+不同数据类型的注入简析+注入的原理详解+配置文件中不同标签体的使用方式

    Spring系列之 配置文件的操作 写在文章前面: 本文带大家掌握Spring配置文件的基础操作以及带领大家理清依赖注入的概念,本文涉及内容广泛,如果各位读者耐心看完,应该会对自身有一个提升 Spri ...

  4. 跨平台框架与React Native基础

    跨平台框架 什么是跨平台框架? 这里的多个平台一般是指 iOS 和 Android . 为什么需要跨平台框架? 目前,移动开发技术主要分为原生开发和跨平台开发两种.其中,原生应用是指在某个特定的移动平 ...

  5. SpringBoot(20)---断言(Assert)

    SpringBoot(20)---断言(Assert) 我们在写单元测试的时候,除了接口直接抛异常而导致该单元测试失败外,还有种是业务上的错误也代表着该单元测试失败.好比我们在测试接口的时候, 该接口 ...

  6. Docker实战(2):主从库搭建

    入门 基于Docker的Mysql主从复制搭建 首先安装docker 拉取mysql镜像:5.7版本 启动主从数据库容器 docker run -p 3339:3306 --name Maste -e ...

  7. Object类:又回到最初的起点

    Object类大概是每个JAVA程序员认识的第一个类,因为它是所有其他类的祖先类.在JAVA单根继承的体系下,这个类中的每个方法都显得尤为重要,因为每个类都能够调用或者重写这些方法.当你JAVA学到一 ...

  8. Redis—HyperLogLog

    HyperLogLog 实现一个功能 统计网站的UV (user view),区别PV (page view) 数据去重 统计总数 同一个用户的反复点击进入记为 1 次 解决方案 最简单的思路是记录集 ...

  9. xxe漏洞,及xml

    xxe漏洞 XML用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言.XML文档结构包括XML声明.DTD文档类型定义(可选).文 ...

  10. day61:Linux:权限管理&rpm软件包管理&yum工具

    目录 1.权限管理 2.rpm软件包管理 3.yum工具(联网) 权限管理 1.什么是权限? 权限主要用来约束用户能对系统所做的操作 2.为什么要使用权限? 因为系统中不可能只存在一个root用户,一 ...