jQuery 监听修改文本框事件

jQuery 监听修改文本框事件在开发中,有时我们需要对 input 的 value 值变化作实时响应。比如文本输入框的实时字数统计功能,要求文本框内容改变时就要触发相关的统计行为。不管这个内容是键盘输入的,还是鼠标粘贴进来的。1,实现原理要实现内容实时监听响应,我们需要用到两个监听事件:oninput 事件和 propertychange 事件(1)oninput这个是标准浏览器的事件,一般浏览器都支持。当

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



1,实现原理


要实现内容实时监听响应,我们需要用到两个监听事件:
oninput 
事件和 
propertychange 
事件


(1)
oninput


这个是标准浏览器的事件,一般浏览器都支持。当 
input 
的 
value 
发生变化时就会发生,无论是键盘输入还是鼠标粘贴的改变都能即时监听到。

原文:jQuery - 监听input组件的内容改变,并进行实时响应


(2)
propertychange

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


2,样例演示

下面使用 
jQuery 做一个字数实时统计功能。当文本框内容改变时,下方会实时统计出当前的字数。

原文:jQuery - 监听input组件的内容改变,并进行实时响应
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
  
<head>
    
<title>hangge.com</title>
    
<meta charset=
"utf-8"
/>
    
<script type=
"text/javascript" 
src=
"jquery-1.11.1.min.js"
></script>
    
<script>
      
$(document).ready(
function
(){
        
$(
'#comment'
).on(
'input propertychange'

function
() {
         
var 
count = $(
this
).val().length;
         
$(
'#tip'
).html(
"已输入 "
+ count +
" 个字。"
);
        
});
      
});
    
</script>
  
</head>
  
<body>
    
<textarea id=
"comment" 
rows=
"5" 
cols=
"50"
></textarea>
    
<br>
    
<div id=
"tip"
></div>
  
</body>
</html>


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

今天的文章jQuery 监听修改文本框事件分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/32605.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注