jiangm520
- 浏览: 1332810 次
- 性别:
- 来自: 成都
-
文章分类
- 全部博客 (471)
- 原创文章 (4)
- Database (84)
- J2SE (63)
- Web (26)
- Javascript (30)
- Lucene (11)
- os (13)
- 算法 (8)
- Webservice (1)
- Open projects (18)
- Hibernate (18)
- Spring (15)
- Css (2)
- J2ee (2)
- 综合技术 (18)
- 安全管理 (13)
- PatternsInJava (27)
- NIO (5)
- Ibatis (2)
- 书籍收藏 (1)
- quartz (7)
- 并发编程 (15)
- oracle问题 (2)
- ios (60)
- coco2d-iphone (3)
- C++ (6)
- Zookeeper (2)
- golang (4)
- animation (2)
- android (1)
最新评论
-
dandingge123：
【引用】限制UITextField输入长度的方法 -
qja：
...
对List顺序，逆序，随机排列实例代码 -
安静听歌：
现在在搞这个，，，，，哎~头都大了，，，又freemarker ...
通用大型网站页面静态化解决方案（一） -
springdata-jpa：
java quartz定时任务demo教程源代码下载，地址：h ...
Quartz 配置参考 -
马清天：
[b][/b][list][*]引用[u][/u][/list ...
通用大型网站页面静态化解决方案（一）
写道
<html>
<head>
<script type="text/javascript">
function InitListener() {
var elemToCheck = document.getElementById("myDiv");
if (elemToCheck.addEventListener) { // Firefox, Opera, Google Chrome and Safari
elemToCheck.addEventListener('DOMAttrModified', OnAttrModified, false);
// Firefox, Opera
} else if (elemToCheck.attachEvent) { // Internet Explorer
elemToCheck.attachEvent('onpropertychange', OnAttrModified);
}
}
function OnAttrModified(event) {
if (event === undefined) { // Internet Explorer
event = window.event;
}
var message = "";
if (event.attrChange === undefined) {
if (event.propertyName === undefined) {
message = "Your browser does not support this example!";
}
else { // Internet Explorer
message = "The " + event.propertyName + " property of the "
+ event.srcElement.tagName + " element has been changed.";
}
}
else { // Firefox, Opera
message += "Something has happened to an attribute of the " + event.target.tagName + " element.\n";
switch (event.attrChange) {
case MutationEvent.MODIFICATION:
message += "The value of the " + event.attrName + " attribute has been changed from "
+ event.prevValue + " to " + event.newValue + ".";
break;
case MutationEvent.ADDITION:
message += "The " + event.attrName + " attribute has been added to the element "
+ "with the value of " + event.newValue + ".";
break;
case MutationEvent.REMOVAL:
message += "The " + event.attrName + " attribute has been removed from the element."
+ "The value was " + event.prevValue + " previously.";
break;
}
;
}
alert(message);
}
function ModifyAlign() {
var elemToCheck = document.getElementById("myDiv");
if (elemToCheck.align == "right")
elemToCheck.align = "left";
else
elemToCheck.align = "right";
}
function ModifyBackgroundColor() {
var elemToCheck = document.getElementById("myDiv");
elemToCheck.style.backgroundColor = "#aaccee";
}
function CreateModifyRemoveAttr() {
var elemToCheck = document.getElementById("myDiv");
// when an attribute is created, the onpropertychange event is not fired
elemToCheck.setAttribute("newAttr", "firstValue");
// when the value of an attribute is modified, the onpropertychange event is fired
elemToCheck.setAttribute("newAttr", "secondValue");
// when an attribute is removed, the onpropertychange event is not fired
elemToCheck.removeAttribute("newAttr");
}
</script>
</head>
<body onload="InitListener ();">
<div id="myDiv" style="background-color:#e0c0a0;">
The alignment can be modified with the first button<br/>
The background color can be changed with the second button<br/>
Finally, with the third button you can create, modify and remove an attribute.
</div>
<br/><br/>
<button onclick="ModifyAlign ();">Modify the alignment</button>
<br/>
<button onclick="ModifyBackgroundColor ();">Modify the color of the background</button>
<br/>
<button onclick="CreateModifyRemoveAttr ();">Create, modify and remove an attribute</button>
</body>
</html>
<head>
<script type="text/javascript">
function InitListener() {
var elemToCheck = document.getElementById("myDiv");
if (elemToCheck.addEventListener) { // Firefox, Opera, Google Chrome and Safari
elemToCheck.addEventListener('DOMAttrModified', OnAttrModified, false);
// Firefox, Opera
} else if (elemToCheck.attachEvent) { // Internet Explorer
elemToCheck.attachEvent('onpropertychange', OnAttrModified);
}
}
function OnAttrModified(event) {
if (event === undefined) { // Internet Explorer
event = window.event;
}
var message = "";
if (event.attrChange === undefined) {
if (event.propertyName === undefined) {
message = "Your browser does not support this example!";
}
else { // Internet Explorer
message = "The " + event.propertyName + " property of the "
+ event.srcElement.tagName + " element has been changed.";
}
}
else { // Firefox, Opera
message += "Something has happened to an attribute of the " + event.target.tagName + " element.\n";
switch (event.attrChange) {
case MutationEvent.MODIFICATION:
message += "The value of the " + event.attrName + " attribute has been changed from "
+ event.prevValue + " to " + event.newValue + ".";
break;
case MutationEvent.ADDITION:
message += "The " + event.attrName + " attribute has been added to the element "
+ "with the value of " + event.newValue + ".";
break;
case MutationEvent.REMOVAL:
message += "The " + event.attrName + " attribute has been removed from the element."
+ "The value was " + event.prevValue + " previously.";
break;
}
;
}
alert(message);
}
function ModifyAlign() {
var elemToCheck = document.getElementById("myDiv");
if (elemToCheck.align == "right")
elemToCheck.align = "left";
else
elemToCheck.align = "right";
}
function ModifyBackgroundColor() {
var elemToCheck = document.getElementById("myDiv");
elemToCheck.style.backgroundColor = "#aaccee";
}
function CreateModifyRemoveAttr() {
var elemToCheck = document.getElementById("myDiv");
// when an attribute is created, the onpropertychange event is not fired
elemToCheck.setAttribute("newAttr", "firstValue");
// when the value of an attribute is modified, the onpropertychange event is fired
elemToCheck.setAttribute("newAttr", "secondValue");
// when an attribute is removed, the onpropertychange event is not fired
elemToCheck.removeAttribute("newAttr");
}
</script>
</head>
<body onload="InitListener ();">
<div id="myDiv" style="background-color:#e0c0a0;">
The alignment can be modified with the first button<br/>
The background color can be changed with the second button<br/>
Finally, with the third button you can create, modify and remove an attribute.
</div>
<br/><br/>
<button onclick="ModifyAlign ();">Modify the alignment</button>
<br/>
<button onclick="ModifyBackgroundColor ();">Modify the color of the background</button>
<br/>
<button onclick="CreateModifyRemoveAttr ();">Create, modify and remove an attribute</button>
</body>
</html>
分享到：
发表评论
-
教你实现 jQuery 的选择器
2010-12-05 21:08 6516做网站免不了用到JS，如果大量用到选择一个JS框架是个不错的选 ... -
关闭输入框自动完成 firefox msie disable input autocomplete
2010-10-28 10:43 3127English Title:Shut input casing ... -
js中prototype用法
2010-10-20 15:56 1274prototype 是在 IE 4 及其以后版本引入的一个 ... -
jquery source
2010-10-20 15:03 1218http://tech.ddvip.com/2009-01/1 ... -
使用 JavaScript 拦截和跟踪浏览器中的 HTTP 请求
2010-10-20 14:10 3806HTTP 请求的拦截技术可以广泛地应用在反向代理、拦截 Aja ... -
判断上传文件的大小
2010-10-19 12:44 1359var Sys = {}; if ... -
js继承的实现
2010-10-19 11:16 1144写道 js继承有5种实现方式： 1、继承第一种方式：对象 ... -
js面向对象
2010-10-19 11:15 2568写道 1、js区别于java的特性还有：实例化类对象时，如 ... -
js高级进阶
2010-10-19 11:14 8158写道 1、js不支持函数(方法)的重载 2、js中，一个 ... -
jQuery 简但实现select二级联动
2010-08-23 12:09 4757写道 < !DOCTYPE html PUBLIC ... -
原始的Ajax 直接使用XmlHttpRequest
2010-08-23 11:29 1903写道 //定义XMLHttp实例 var xmlHttp ... -
jquery checkbox，radio ，select value
2010-08-12 10:01 1669写道 .date-region select:visi ... -
jquery flot 使用笔记
2010-06-27 00:57 5809写道 <!DOCTYPE HTML PUBLIC &q ... -
js clone
2010-05-13 13:50 1284<!DOCTYPE html PUBLIC &q ... -
javascript可以轻松操作客户端剪贴板内容
2010-04-19 12:29 1360写道 <html> <head> ... -
dhtml
2010-04-09 10:18 2375写道 Object.__defineGetter__ = ... -
MzTreeView
2010-03-24 16:05 5666写道 MzTreeView 1.0 是数据一次性加载，客户 ... -
JavaScript 节点操作 以及DOMDocument属性和方法
2010-03-24 15:28 16251Attributes 存储节点的属 ... -
在网页里打开本地的驱动器
2010-03-24 12:14 1590<html> <head> < ... -
页面登录进度条
2010-03-24 12:13 1624<form name=loading> < ...
相关推荐
JavaScript 监听输入框值的即时变化 在 Web 开发中，监听输入框值的即时变化是一种常见且有用的技术，可以帮助我们实现实时的用户体验感。例如，即时显示输入框已经被输入的字节数，或者即时读取输入的值来进行搜索...
监听输入框值的即时变化onpropertychange与input事件的使用
onchange事件是传统的监听输入框值变化的方法，它在元素失去焦点，并且值确实发生变化时被触发。重要的是要注意，onchange事件不会在元素获得焦点时立即触发，而是在用户完成输入后，通过鼠标点击或按Tab键切换焦点...
监听输入框值的即时变化 function setupInputEvent(elementId) { var inputElement = document.getElementById(elementId); if (window.attachEvent) { // IE 浏览器使用 onpropertychange inputElement....
实时监听输入框值变化是Web开发中常见需求之一，特别是在需要即时校验用户输入内容或者响应用户行为时，此功能显得尤为重要。 2. **绑定oninput和onpropertychange事件**： - `oninput`事件在输入框内容改变时...
通过监听输入框的变化并作出即时响应，开发者可以构建更灵敏、更智能的用户界面。这篇文章介绍如何使用zepto.js这个轻量级的JavaScript库来实现对输入框的实时监听。 zepto.js是专为现代浏览器设计的一个轻量级的...
整个过程中，inputpropertychange事件在检测到输入框的value属性发生变化时触发，这比定时器方案的响应速度快，能够给予用户更加即时的反馈。此外，代码中还使用了self.options.tel来控制手机号码输入状态的逻辑变量...
实现这一功能通常需要监听UITextField的文字变化，计算文本内容的高度，并相应地调整输入框的frame。 其次，该组件支持插入图片功能。在即时通讯应用中，发送图片是必不可少的。这个模块可能包含一个图片选择器，让...
- 登录时用户名输入完整后自动显示头像，这通常涉及到监听输入框内容的变化，并在满足特定条件下触发加载和显示头像的逻辑。 - 注册用户时实时提示注册格式是否正确，这可以使用TextWatcher来实现，例如实时验证邮箱...
"通过输入框实时查询列表值"是一个常见的功能，常用于搜索建议、自动补全或者筛选列表等场景。这个功能通常涉及JavaScript库，如jQuery，以及相关的事件监听，如keyup事件。 首先，jQuery是一个轻量级的JavaScript...
3. **dropdown.js**：这是一个JavaScript文件，负责处理输入框的事件监听（如键盘输入、点击等）和动态更新下拉列表。JavaScript将根据用户输入的内容，从数据源中筛选匹配项，并在下拉列表中显示。同时，它也可能...
接着，我们用JavaScript监听输入框的`input`事件，该事件会在用户输入时触发。在事件处理函数中，我们可以通过`event.target.value`获取到当前输入框的值，然后利用这个值去过滤后台或本地存储的匹配数据。这里可以...
可能需要监听输入框的事件，比如在用户输入时即时验证车牌号的合法性。layui的form模块提供on方法，可以监听表单元素的事件。 ```javascript form.on('input(carNumber)', function(data){ var value = data....
实现这一功能的关键在于监听输入框的`keyup`或`input`事件，并在事件触发时执行查询和更新提示内容的逻辑。 为了实现字母自动转换为大写，可以使用JavaScript的内置方法`toUpperCase()`。每当用户输入一个字符时，...
接下来，我们可以使用JavaScript来监听输入框的`input`事件，以便在用户输入时触发提示功能。通过`addEventListener`来绑定事件处理函数： ```javascript document.getElementById('emailInput').addEventListener...
在实现过程中，开发者可能会使用jQuery的`keyup`或`input`事件来监听输入框的变化。每当用户输入时，插件会触发一个AJAX请求，将当前的输入值作为参数发送到服务器。服务器端根据这个值查询数据库，找到匹配的记录，...
为了提高用户体验，可以添加实时搜索建议功能，即用户在输入框中输入字符时，无需提交表单就能即时看到匹配的搜索建议。这通常通过监听输入事件并利用`xmlhttp.js`中的函数发送AJAX请求来实现。 8. **安全性**： ...