jQuery 监听修改文本框事件

在开发中,有时我们需要对  input 的  value 值变化作实时响应。比如文本输入框的实时字数统计功能,要求文本框内容改变时就要触发相关的统计行为。不管这个内容是键盘输入的,还是鼠标粘贴进来的。

1,实现原理
要实现内容实时监听响应,我们需要用到两个监听事件: oninput  事件和  propertychange  事件
(1) oninput
这个是标准浏览器的事件,一般浏览器都支持。当  input  的  value  发生变化时就会发生,无论是键盘输入还是鼠标粘贴的改变都能即时监听到。
jQuery 监听修改文本框事件_第1张图片

(2) propertychange
由于  IE9 以下是不支持的  oninput 事件。这个时候就要用到IE专有的  propertychange 事件。顾名思义,翻译过来叫属性变更事件。 这个事件就比较强大了,不仅仅会监听到  input value 属性,还包括其他的标签属性。各种属性发生变化都会产生该事件,比如  span 元素的  style 属性改变。同时在事件发生时还可以用  event.propertyName 访问到改变的属性名。

2,样例演示
下面使用  jQuery 做一个字数实时统计功能。当文本框内容改变时,下方会实时统计出当前的字数。
jQuery 监听修改文本框事件_第2张图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  
     hangge.com
     "utf-8" />
    
    
  
  
    
    
    
"tip" >
  




原文出自: www.hangge.com   转载请保留原文链接: http://www.hangge.com/blog/cache/detail_1378.html


你可能感兴趣的:(javascript)