javascript小技巧(转)

最新推荐文章于 2025-08-15 09:01:53 发布

原创最新推荐文章于 2025-08-15 09:01:53 发布 · 578 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #正则表达式 #autocomplete #input #function #microsoft

本文汇总了多种网页操作技巧，包括事件处理、元素选择、样式修改等。覆盖了从简单的事件监听到复杂的DOM操作，适用于前端开发者提升网页互动性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

# 事件源对象 event.srcElement.tagName 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" mce_href="mailto:aaa@bbb.com?subject=ccc&body=xxxyyy"> # 快速转到位置 obj.scrollIntoView(true) # 锚 <a name="first"> <a href="#first" mce_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" mce_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()" mce_href="javascript:function()">word</a> # 上一网页源 asp: request.servervariables("HTTP_REFERER") javascript: document.referrer # 释放内存 CollectGarbage(); # 禁止右键 document.oncontextmenu = function() { return false;} # 禁止保存 <noscript><iframe src="*.htm" mce_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" mce_href="favicon.ico"> favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下 # 收藏栏图标 <link rel="Bookmark" href="favicon.ico" mce_href="favicon.ico"> # 查看源码 <input type=button value=查看网页源代码 onclick="window.location = 'view-source:'+ 'http://www.youkuaiyun.com/'"> # 关闭输入法 <input style="ime-mode:disabled" mce_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)" mce_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; //过滤数字 //特殊用途 //不缓存 //正则匹配匹配中文字符的正则表达式： [/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,''))" //消除图像工具栏 <IMG SRC="mypicture.jpg" mce_SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="false"> or <head> <meta http-equiv="imagetoolbar" content="no"> </head> //无提示关闭 function Close() { var ua=navigator.userAgent var ie=navigator.appName=="Microsoft Internet Explorer"?true:false if(ie) { var IEversion=parseFloat(ua.substring(ua.indexOf("MSIE ")+5,ua.indexOf(";",ua.indexOf("MSIE ")))) if(IEversion< 5.5) { var str = '<object id=noTipClose classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">' str += '<param name="Command" value="Close"></object>'; document.body.insertAdjacentHTML("beforeEnd", str); document.all.noTipClose.Click(); } else { window.opener =null; window.close(); } } else { window.close() } } //取得控件得绝对位置(1) <mce:script language="javascript"></mce:script> //获得控件的绝对位置(2) oRect = obj.getBoundingClientRect(); oRect.left oRect.

http://www.blogguy.cn/show-43-1.html