📄 javascript小技巧 .html
字号:
</li>
<li><strong>禁止右键</strong>
<br/>document.oncontextmenu = function() { return false;}
</li>
<li><font size="2"><strong>禁止保存</strong>
<br/><noscript><iframe src="*.htm"></iframe></noscript> </font>
</li>
<li><font size="2"><strong>禁止选取</strong><body oncontextmenu=<span style="COLOR: #ff00ff">"return false"</span> ondragstart=<span style="COLOR: #ff00ff">"return false"</span> onselectstart =<span style="COLOR: #ff00ff">"return false"</span> onselect=<span style="COLOR: #ff00ff">"document.selection.empty()"</span> oncopy=<span style="COLOR: #ff00ff">"document.selection.empty()"</span> onbeforecopy=<span style="COLOR: #ff00ff">"return false"</span>onmouseup=<span style="COLOR: #ff00ff">"document.selection.empty()></span><span style="COLOR: #ff00ff"> </span></font>
</li>
<li><font size="2"><strong>禁止粘贴</strong>
<br/><input type=text onpaste="return false"></font>
</li>
<li><font size="2"><strong>地址栏图标</strong>
<br/><link rel="Shortcut Icon" href="favicon.ico">
<br/>favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下</font>
</li>
<li><font size="2"><strong>收藏栏图标</strong>
<br/><link rel="Bookmark" href="favicon.ico"> </font>
</li>
<li><font size="2"><strong>查看源码</strong>
<br/><input type=button value=查看网页源代码 onclick="window.location = 'view-source:'+ 'http://www.csdn.net/'"> </font>
</li>
<li><font size="2"><strong>关闭输入法</strong>
<br/><input style="ime-mode:disabled"> </font>
</li>
<li><strong>自动全选</strong>
<br/><input type=text name=text1 value="123" onfocus="this.select()">
</li>
<li><font size="2"><strong>ENTER键可以让光标移到下一个输入框
<br/></strong><input onkeydown="if(event.keyCode==13)event.keyCode=9"></font>
</li>
<li><strong>文本框的默认值
<br/></strong><input type=text value="123" onfocus="alert(this.defaultValue)">
</li>
<li><strong>title换行
<br/></strong>obj.title = "123&#13sdfs&#32"
</li>
<li><font size="2"><strong>获得时间所代表的微秒
<br/></strong>var n1 = new Date("2004-10-10".replace(/-/g, "\/")).getTime()</font>
</li>
<li><font size="2"><strong>窗口是否关闭
<br/></strong>win.closed </font>
</li>
<li><font size="2"><strong>checkbox扁平
<br/></strong><input type=checkbox style="position: absolute; clip:rect(5px 15px 15px 5px)"><br></font>
</li>
<li><strong>获取选中内容
<br/></strong>document.selection.createRange().duplicate().text
</li>
<li><strong>自动完成功能
<br/></strong><input  type=text  autocomplete=on>打开该功能 
<br/><input  type=text  autocomplete=off>关闭该功能   
</li>
<li><font size="2"><strong>窗口最大化</strong>
<br/><body onload="window.resizeTo(window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4)"></font>
</li>
<li><font size="2"><strong>无关闭按钮IE
<br/></strong>window.open("aa.htm", "meizz", "fullscreen=7"); </font>
</li>
<li><strong>统一编码/解码
<br/></strong>alert(decodeURIComponent(encodeURIComponent("http://你好.com?as= hehe")))
<br/>encodeURIComponent对":"、"/"、";" 和 "?"也编码
</li>
<li><strong>表格行指示
<br/></strong><tr onmouseover="this.bgColor='#f0f0f0'" onmouseout="this.bgColor='#ffffff'">
</li>
<p>
<br/><strong>//各种尺寸</strong>
</p>
<div style="BORDER-RIGHT: #8a8a8a 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #8a8a8a 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; MARGIN: 4px; OVERFLOW: auto; BORDER-LEFT: #8a8a8a 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #8a8a8a 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #eeeeee">s  +=  <span style="COLOR: #ff00ff">"\r\n网页可见区域宽："</span>+  document.body.clientWidth;  
<br/>s  +=  <span style="COLOR: #ff00ff">"\r\n网页可见区域高："</span>+  document.body.clientHeight;  
<br/>s  +=  <span style="COLOR: #ff00ff">"\r\n网页可见区域高："</span>+  document.body.offsetWeight  +<span style="COLOR: #ff00ff">"  (包括边线的宽)"</span>;  
<br/>s  +=  <span style="COLOR: #ff00ff">"\r\n网页可见区域高："</span>+  document.body.offsetHeight  +<span style="COLOR: #ff00ff">"  (包括边线的宽)"</span>;  
<br/>s  +=  <span style="COLOR: #ff00ff">"\r\n网页正文全文宽："</span>+  document.body.scrollWidth;  
<br/>s  +=  <span style="COLOR: #ff00ff">"\r\n网页正文全文高："</span>+  document.body.scrollHeight;  
<br/>s  +=  <span style="COLOR: #ff00ff">"\r\n网页被卷去的高："</span>+  document.body.scrollTop;  
<br/>s  +=  <span style="COLOR: #ff00ff">"\r\n网页被卷去的左："</span>+  document.body.scrollLeft;  
<br/>s  +=  <span style="COLOR: #ff00ff">"\r\n网页正文部分上："</span>+  window.screenTop;  
<br/>s  +=  <span style="COLOR: #ff00ff">"\r\n网页正文部分左："</span>+  window.screenLeft;  
<br/>s  +=  <span style="COLOR: #ff00ff">"\r\n屏幕分辨率的高："</span>+  window.screen.height;  
<br/>s  +=  <span style="COLOR: #ff00ff">"\r\n屏幕分辨率的宽："</span>+  window.screen.width;  
<br/>s  +=  <span style="COLOR: #ff00ff">"\r\n屏幕可用工作区高度："</span>+  window.screen.availHeight;  
<br/>s  +=  <span style="COLOR: #ff00ff">"\r\n屏幕可用工作区宽度："</span>+  window.screen.availWidth;  
</div></font>
</li></font>
</li></font>
</li></strong></font>
</li></strong></font>
</li>
</ul>
<p><font size="2"><strong>//过滤数字</strong>
<div style="BORDER-RIGHT: #8a8a8a 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #8a8a8a 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; MARGIN: 4px; OVERFLOW: auto; BORDER-LEFT: #8a8a8a 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #8a8a8a 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #eeeeee"><input type=text onkeypress=<span style="COLOR: #ff00ff">"return event.keyCode>=48&&event.keyCode<=57||(this.value.indexOf('.')<0?event.keyCode==46:false)"</span> onpaste=<span style="COLOR: #ff00ff">"return !clipboardData.getData('text').match(/\D/)"</span> ondragenter=<span style="COLOR: #ff00ff">"return false"</span>>
</div></font>
</p>
<p><font size="2"><strong>//特殊用途</strong>
<div style="BORDER-RIGHT: #8a8a8a 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #8a8a8a 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; MARGIN: 4px; OVERFLOW: auto; BORDER-LEFT: #8a8a8a 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #8a8a8a 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #eeeeee"><input type=button value=导入收藏夹 onclick=<span style="COLOR: #ff00ff">"window.external.ImportExportFavorites(true,'http:<span style="COLOR: #008000">//localhost');"</span>> </span>
<br/><input type=button value=导出收藏夹 onclick=<span style="COLOR: #ff00ff">"window.external.ImportExportFavorites(false,'http:<span style="COLOR: #008000">//localhost');"</span>> </span>
<br/><input type=button value=整理收藏夹 onclick=<span style="COLOR: #ff00ff">"window.external.ShowBrowserUI('OrganizeFavorites', null)"</span>>
<br/><input type=button value=语言设置   onclick=<span style="COLOR: #ff00ff">"window.external.ShowBrowserUI('LanguageDialog', null)"</span>>
<br/><input type=button value=加入收藏夹 onclick=<span style="COLOR: #ff00ff">"window.external.AddFavorite('http:<span style="COLOR: #008000">//www.google.com/', 'google')"</span>> </span>
<br/><input type=button value=加入到频道 onclick=<span style="COLOR: #ff00ff">"window.external.addChannel('http:<span style="COLOR: #008000">//www.google.com/')"</span>> </span>
<br/><input type=button value=加入到频道 onclick=<span style="COLOR: #ff00ff">"window.external.showBrowserUI('PrivacySettings',null)"</span>>
</div></font>
</p>
<p><font size="2"><strong>//不缓存</strong>
<div style="BORDER-RIGHT: #8a8a8a 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #8a8a8a 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; MARGIN: 4px; OVERFLOW: auto; BORDER-LEFT: #8a8a8a 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #8a8a8a 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #eeeeee"><META HTTP-EQUIV=<span style="COLOR: #ff00ff">"pragma"</span> CONTENT=<span style="COLOR: #ff00ff">"no-cache"</span>>
<br/><META HTTP-EQUIV=<span style="COLOR: #ff00ff">"Cache-Control"</span> CONTENT=<span style="COLOR: #ff00ff">"no-cache, must-revalidate"</span>>
<br/><META HTTP-EQUIV=<span style="COLOR: #ff00ff">"expires"</span> CONTENT=<span style="COLOR: #ff00ff">"0"</span>>
</div>
<p></p></font>
</p>
<p><font size="2"></font>
</p>
<br/><font size="2"><strong>//正则匹配</strong></font>
<p></p><font size="2">
<div style="BORDER-RIGHT: #8a8a8a 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #8a8a8a 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; MARGIN: 4px; OVERFLOW: auto; BORDER-LEFT: #8a8a8a 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #8a8a8a 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #eeeeee">匹配中文字符的正则表达式： [\u4e00-\u9fa5]
<br/>匹配双字节字符(包括汉字在内)：[^\x00-\xff]
<br/>匹配空行的正则表达式：\n[\s| ]*\r
<br/>匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/ 
<br/>匹配首尾空格的正则表达式：(^\s*)|(\s*$)（像vbscript那样的trim函数）
<br/>匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
<br/>匹配网址URL的正则表达式：http:<span style="COLOR: #008000">//([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)? </span>
<br/>以下是例子：
<br/>利用正则表达式限制网页表单里的文本框输入内容：
<br/>用正则表达式限制只能输入中文：onkeyup=<span style="COLOR: #ff00ff">"value=value.replace(/[^\u4E00-\u9FA5]/g,'')"</span> onbeforepaste=<span style="COLOR: #ff00ff">"clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"</span>
<br/>1.用正则表达式限制只能输入全角字符： onkeyup=<span style="COLOR: #ff00ff">"value=value.replace(/[^\uFF00-\uFFFF]/g,'')"</span> onbeforepaste=<span style="COLOR: #ff00ff">"clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"</span>
<br/>2.用正则表达式限制只能输入数字：onkeyup=<span style="COLOR: #ff00ff">"value=value.replace(/[^\d]/g,'') "</span>onbeforepaste=<span style="COLOR: #ff00ff">"clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"</span>
<br/>3.用正则表达式限制只能输入数字和英文：onkeyup=<span style="COLOR: #ff00ff">"value=value.replace(/[\W]/g,'') "</span>onbeforepaste=<span style="COLOR: #ff00ff">"clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"</span>
</div>
<p><font size="2"><strong>//消除图像工具栏</strong>
<div style="BORDER-RIGHT: #8a8a8a 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #8a8a8a 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; MARGIN: 4px; OVERFLOW: auto; BORDER-LEFT: #8a8a8a 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #8a8a8a 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #eeeeee"><strong><IMG SRC=<span style="COLOR: #ff00ff">"mypicture.jpg"</span> HEIGHT=<span style="COLOR: #ff00ff">"100px"</span> WIDTH=<span style="COLOR: #ff00ff">"100px"</span> GALLERYIMG=<span style="COLOR: #ff00ff">"false"</span>> 
<br/>or
<br/><head>
<br/><meta http-equiv=<span style="COLOR: #ff00ff">"imagetoolbar"</span> content=<span style="COLOR: #ff00ff">"no"</span>>
<br/></head></strong>
</div></font>
</p></font>
<p><font size="2"><strong>//无提示关闭
<br/></strong></font>
</p><font size="2">
<div style="BORDER-RIGHT: #8a8a8a 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #8a8a8a 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; MARGIN: 4px; OVERFLOW: auto; BORDER-LEFT: #8a8a8a 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #8a8a8a 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">function</span> Close()
<br/>{
<br/> <span style="COLOR: #0000ff">var</span> ua=navigator.userAgent
<br/> <span style="COLOR: #0000ff">var</span> ie=navigator.appName==<span style="COLOR: #ff00ff">"Microsoft Internet Explorer"</span>?<span style="COLOR: #0000ff">true</span>:false
<br/> <span style="COLOR: #0000ff">if</span>(ie)
<br/> {
<br/>      <span style="COLOR: #0000ff">var</span> IEversion=parseFloat(ua.substring(ua.indexOf(<span style="COLOR: #ff00ff">"MSIE "</span>)+5,ua.indexOf(<span style="COLOR: #ff00ff">";"</span>,ua.indexOf(<span style="COLOR: #ff00ff">"MSIE "</span>))))
<br/>  <span style="COLOR: #0000ff">if</span>(IEversion< 5.5)
<br/>  {
<br/>   <span style="COLOR: #0000ff">var</span> str  = '<object id=noTipClose classid=<span style="COLOR: #ff00ff">"clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"</span>>'
<br/>       str += '<param name=<span style="COLOR: #ff00ff">"Command"</span> value=<span style="COLOR: #ff00ff">"Close"</span>></object>';
<br/>       document.body.insertAdjacentHTML(<span style="COLOR: #ff00ff">"beforeEnd"</span>, str);
<br/>       document.all.noTipClose.Click();
<br/>  }
<br/>      else
<br/>  {
<br/>       window.opener =<span style="COLOR: #0000ff">null</span>;
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -