jQuery 监听修改文本框事件
来源:互联网 发布:linux合并两个文件夹 编辑:程序博客网 时间:2024/05/22 17:08
在开发中,有时我们需要对 input 的 value 值变化作实时响应。比如文本输入框的实时字数统计功能,要求文本框内容改变时就要触发相关的统计行为。不管这个内容是键盘输入的,还是鼠标粘贴进来的。
1,实现原理
要实现内容实时监听响应,我们需要用到两个监听事件:oninput 事件和 propertychange 事件
(1)oninput
这个是标准浏览器的事件,一般浏览器都支持。当 input 的 value 发生变化时就会发生,无论是键盘输入还是鼠标粘贴的改变都能即时监听到。
(2)propertychange
由于 IE9 以下是不支持的 oninput 事件。这个时候就要用到IE专有的 propertychange 事件。顾名思义,翻译过来叫属性变更事件。 这个事件就比较强大了,不仅仅会监听到 input 的value 属性,还包括其他的标签属性。各种属性发生变化都会产生该事件,比如 span 元素的 style 属性改变。同时在事件发生时还可以用 event.propertyName 访问到改变的属性名。
下面使用 jQuery 做一个字数实时统计功能。当文本框内容改变时,下方会实时统计出当前的字数。
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>
阅读全文
1 0
- jQuery 监听修改文本框事件
- jquery实现的监听文本框输入事件
- jquery监听文本框输入改变事件
- 文本框可监听事件
- 事件监听之文本框
- Jquery监听input text修改事件
- jquery实现监听文本框
- 监听文本框内容改变事件
- jQuery 监听文本框内容变化
- jquery文本框改变事件
- jquery文本框改变事件
- jquery 监听事件
- jquery 监听回车事件
- jquery ajax监听事件
- jQuery监听回车事件
- Jquery事件监听
- Android之EditText文本框监听事件
- 监听文本框事件几种方法总结
- 做表要点
- <h1>测试博客</h1><script type="text/javascript">alert(456);</script>
- Shader 遮罩纹理贴图参考代码笔记
- Dubbo架构设计详解
- socket编程之解决流协议的粘包问题(二)
- jQuery 监听修改文本框事件
- windows开机后一键启动应用程序
- C#多线程编程之线程池的使用 (ThreadPool)
- Failed to load JavaHL Library
- A
- container和container-fluid之间的区别
- [Leetcode] 344. Reverse String 解题报告
- Spring 之AOP AspectJ切入点语法详解
- 所学jQuery来自w3cSchool