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. Spring JPA 查询创建

    Spring JPA 查询创建 这是JPA内容的核心部分,可以收藏用作参阅文档. 1. 查询转化和关键字 例:一个JPA查询的转化 public interface UserRepository ex ...

  2. HTML -- 表单元素2

    (1)<select>元素(下拉列表) <html> <body> <!-- 表单处理程序在action属性中指定 --> <form actio ...

  3. Spring AOP-用代理代替繁琐逻辑

    Spring AOP 基础概念 AOP 是一种面向切面的编程思想,通俗来讲,这里假如我们有多个方法. @Component public class Demo { public void say1() ...

  4. 第15课 - make的隐式规则(上)

    第15课 - make的隐式规则(上) 1. 问题 如果把同一个目标的命令拆分的写到不同地方,会发生什么? 执行make all 这个实验表明了:如果同一个目标的命令拆分的写到不同地方,那么 make ...

  5. js中数组Array对象的方法sort()的应用

    一. sort()方法的介绍 //给一组数据排序 var arrNum = [12,1,9,23,56,100,88,66]; console.log("排序前的数组:"+arrN ...

  6. mariadb 1

    mariadb(第一章)     数据库介绍 1.什么是数据库? 简单的说,数据库就是一个存放数据的仓库,这个仓库是按照一定的数据结构(数据结构是指数据的组织形式或数据之间的联系)来组织,存储的,我们 ...

  7. openstack核心组件——cinder存储服务(11)

    一.cinder 介绍:   理解 Block Storage 操作系统获得存储空间的方式一般有两种: 通过某种协议(SAS,SCSI,SAN,iSCSI 等)挂接裸硬盘,然后分区.格式化.创建文件系 ...

  8. (专题四)06 matlab绘图选项卡

    绘图选项卡 例子1--选择已有变量,绘制图形 都是按照选中的先后顺序依次确定坐标, 如果要修改绘制图形 法一,利用绘图工具和停靠图形按钮 法二,命令行窗口中输入命令 >>plottools ...

  9. canvas的简单绘制及设置

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ...

  10. Windows批处理(cmd/bat)常用命令学习

    前言 批处理文件(batch file)包含一系列 DOS命令,通常用于自动执行重复性任务.用户只需双击批处理文件便可执行任务,而无需重复输入相同指令.编写批处理文件非常简单,但难点在于确保一切按顺序 ...