html处理的小技巧
1. 在密码框中显示文字
<TABLE> <TR> <TD> <input type= "text " value= "请输入密码 " onclick= "this.parentNode.innerHTML= ' <INPUT type=password value=> '; " /> </TD> </TR> </TABLE>
2. 相关技巧整理
事件源对象
event.srcElement.tagName(document.getElementsByTagName)
event.srcElement.type
捕获释放
event.srcElement.setCapture();
event.srcElement.releaseCapture();
事件按键
event.keyCode
event.shiftKey
event.altKey
event.ctrlKey
事件返回值
event.returnValue
鼠标位置
event.x
event.y
窗体活动元素
document.activeElement
绑定事件
document.captureEvents(Event.KEYDOWN);
访问窗体元素
document.all( "txt ").focus();
document.all( "txt ").select();
窗体命令
document.execCommand
窗体COOKIE
document.cookie
菜单事件
document.oncontextmenu
创建元素
document.createElement( "SPAN ");
根据鼠标获得元素：
document.elementFromPoint(event.x,event.y).tagName== "TD
document.elementFromPoint(event.x,event.y).appendChild(ms)
窗体图片
document.images[索引]
窗体事件绑定
document.onmousedown=scrollwindow;
元素
document.窗体.elements[索引]
对象绑定事件
document.all.xxx.detachEvent( 'onclick ',a);
插件数目
navigator.plugins
取变量类型
typeof($js_libpath) == "undefined "
下拉框
下拉框.options[索引]
下拉框.options.length
查找对象
document.getElementsByName( "r1 ");
document.getElementById(id);
定时
timer=setInterval( 'scrollwindow() ',delay);
clearInterval(timer);
UNCODE编码
escape() ,unescape
父对象
obj.parentElement(dhtml)
obj.parentNode(dom)
交换表的行
TableID.moveRow(2,1)
替换CSS
document.all.csss.href = "a.css ";
并排显示
display:inline
隐藏焦点
hidefocus=true
根据宽度换行
style= "word-break:break-all "
自动刷新
<meta HTTP-EQUIV= "refresh " CONTENT= "8;URL=http://c98.yeah.net ">
简单邮件
<a href= "mailto:[email protected]?subject=ccc&body=xxxyyy ">
快速转到位置
obj.scrollIntoView(true)
锚
<a name= "first ">
<a href= "#first "> anchors </a>
网页传递参数
location.search();
可编辑
obj.contenteditable=true
执行菜单命令
obj.execCommand
双字节字符
/[^\x00-\xff]/
汉字
/[\u4e00-\u9fa5]/
让英文字符串超出表格宽度自动换行
word-wrap: break-word; word-break: break-all;
透明背景
<IFRAME src= "1.htm " width=300 height=180 allowtransparency> </iframe>
获得style内容
obj.style.cssText
HTML标签
document.documentElement.innerHTML
第一个style标签
document.styleSheets[0]
style标签里的第一个样式
document.styleSheets[0].rules[0]
防止点击空链接时，页面往往重置到页首端。
<a href= "javascript:function() "> word </a>
上一网页源
asp:
request.servervariables( "HTTP_REFERER ")
javascript:
document.referrer
释放内存
CollectGarbage();
禁止右键
document.oncontextmenu = function() { return false;}
禁止保存
<noscript> <iframe src= "*.htm "> </iframe> </noscript>
禁止选取 <body oncontextmenu= "return false " ondragstart= "return false " onselectstart = "return false " onselect= "document.selection.empty() " oncopy= "document.selection.empty() " onbeforecopy= "return false "onmouseup= "document.selection.empty()>
禁止粘贴
<input type=text onpaste= "return false ">
地址栏图标
<link rel= "Shortcut Icon " href= "favicon.ico ">
favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下
收藏栏图标
<link rel= "Bookmark " href= "favicon.ico ">
查看源码
<input type=button value=查看网页源代码 onclick= "window.location = 'view-source: '+ 'http://www.csdn.net/ ' ">
关闭输入法
<input style= "ime-mode:disabled ">
自动全选
<input type=text name=text1 value= "123 " onfocus= "this.select() ">
ENTER键可以让光标移到下一个输入框
<input onkeydown= "if(event.keyCode==13)event.keyCode=9 ">
文本框的默认值
<input type=text value= "123 " onfocus= "alert(this.defaultValue) ">
title换行
obj.title = "123 sdfs "
获得时间所代表的微秒
var n1 = new Date( "2004-10-10 ".replace(/-/g, "\/ ")).getTime()
窗口是否关闭
win.closed
checkbox扁平
<input type=checkbox style= "position: absolute; clip:rect(5px 15px 15px 5px) "> <br>
获取选中内容
document.selection.createRange().duplicate().text
自动完成功能
<input type=text autocomplete=on> 打开该功能
<input type=text autocomplete=off> 关闭该功能
窗口最大化
<body onload= "window.resizeTo(window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4) ">
无关闭按钮IE
window.open( "aa.htm ", "meizz ", "fullscreen=7 ");
统一编码/解码
alert(decodeURIComponent(encodeURIComponent( "http://你好.com?as= hehe ")))
encodeURIComponent对 ": "、 "/ "、 "; " 和 "? "也编码
表格行指示
<tr onmouseover= "this.bgColor= '#f0f0f0 ' " onmouseout= "this.bgColor= '#ffffff ' ">
//各种尺寸
s += "\r\n网页可见区域宽： "+ document.body.clientWidth;
s += "\r\n网页可见区域高： "+ document.body.clientHeight;
s += "\r\n网页可见区域高： "+ document.body.offsetWeight + " (包括边线的宽) ";
s += "\r\n网页可见区域高： "+ document.body.offsetHeight + " (包括边线的宽) ";
s += "\r\n网页正文全文宽： "+ document.body.scrollWidth;
s += "\r\n网页正文全文高： "+ document.body.scrollHeight;
s += "\r\n网页被卷去的高： "+ document.body.scrollTop;
s += "\r\n网页被卷去的左： "+ document.body.scrollLeft;
s += "\r\n网页正文部分上： "+ window.screenTop;
s += "\r\n网页正文部分左： "+ window.screenLeft;
s += "\r\n屏幕分辨率的高： "+ window.screen.height;
s += "\r\n屏幕分辨率的宽： "+ window.screen.width;
s += "\r\n屏幕可用工作区高度： "+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度： "+ window.screen.availWidth;
//过滤数字
<input type=text onkeypress= "return event.keyCode> =48&&event.keyCode <=57||(this.value.indexOf( '. ') <0?event.keyCode==46:false) " onpaste= "return !clipboardData.getData( 'text ').match(/\D/) " ondragenter= "return false ">
//特殊用途
<input type=button value=导入收藏夹 onclick= "window.external.ImportExportFavorites(true, 'http://localhost '); ">
<input type=button value=导出收藏夹 onclick= "window.external.ImportExportFavorites(false, 'http://localhost '); ">
<input type=button value=整理收藏夹 onclick= "window.external.ShowBrowserUI( 'OrganizeFavorites ', null) ">
<input type=button value=语言设置 onclick= "window.external.ShowBrowserUI( 'LanguageDialog ', null) ">
<input type=button value=加入收藏夹 onclick= "window.external.AddFavorite( 'http://www.google.com/ ', 'google ') ">
<input type=button value=加入到频道 onclick= "window.external.addChannel( 'http://www.google.com/ ') ">
<input type=button value=加入到频道 onclick= "window.external.showBrowserUI( 'PrivacySettings ',null) ">
//不缓存
<META HTTP-EQUIV= "pragma " CONTENT= "no-cache ">
<META HTTP-EQUIV= "Cache-Control " CONTENT= "no-cache, must-revalidate ">
<META HTTP-EQUIV= "expires " CONTENT= "0 ">
//正则匹配
匹配中文字符的正则表达式： [\u4e00-\u9fa5]
匹配双字节字符(包括汉字在内)：[^\x00-\xff]
匹配空行的正则表达式：\n[\s| ]*\r
匹配HTML标记的正则表达式：/ <(.*)> .* <\/\1> | <(.*) \/> /
匹配首尾空格的正则表达式：(^\s*)|(\s*$)（像vbscript那样的trim函数）
匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
以下是例子：
利用正则表达式限制网页表单里的文本框输入内容：
用正则表达式限制只能输入中文：onkeyup= "value=value.replace(/[^\u4E00-\u9FA5]/g, ' ') " onbeforepaste= "clipboardData.setData( 'text ',clipboardData.getData( 'text ').replace(/[^\u4E00-\u9FA5]/g, ' ')) "
1.用正则表达式限制只能输入全角字符： onkeyup= "value=value.replace(/[^\uFF00-\uFFFF]/g, ' ') " onbeforepaste= "clipboardData.setData( 'text ',clipboardData.getData( 'text ').replace(/[^\uFF00-\uFFFF]/g, ' ')) "
2.用正则表达式限制只能输入数字：onkeyup= "value=value.replace(/[^\d]/g, ' ') "onbeforepaste= "clipboardData.setData( 'text ',clipboardData.getData( 'text ').replace(/[^\d]/g, ' ')) "
3.用正则表达式限制只能输入数字和英文：onkeyup= "value=value.replace(/[\W]/g, ' ') "onbeforepaste= "clipboardData.setData( 'text ',clipboardData.getData( 'text ').replace(/[^\d]/g, ' ')) "