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:aaa@bbb.com?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, ' ')) "
