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, ' ')) "
分享到:
相关推荐
### HTML的一些小技巧 在网页开发过程中,合理运用HTML的小技巧可以有效提升用户体验,优化页面布局及功能。本文将详细介绍给定文件中的多个HTML小技巧及其应用场景。 #### 1. 设置背景图片固定不滚动 ```html ...
"网页代码常用小技巧"这个主题涵盖了一系列能够提升HTML编写效率和优化网页效果的方法。 1. **元信息与头部元素**: HTML文档的部分常常被用来放置元信息,如字符编码、页面标题、样式表链接、JavaScript文件引用...
1. **JavaScript小技巧整理篇(特别全)**:这篇文章汇总了许多JavaScript编程中的实用技巧,包括但不限于变量处理、函数运用、事件处理等方面。 2. **javascript同步服务器时间和同步倒计时小技巧**:讲解如何用...
【电脑实用小技巧】是众多用户在日常使用电脑过程中可能会遇到的问题和解决方案的集合,旨在帮助初学者提高电脑操作效率,解决常见问题。这个压缩包包含了一系列的HTML文档,涵盖了多个方面的电脑技术知识。 首先,...
"JSP编程小技巧集锦121例子"这个资源显然提供了大量实用的JSP开发经验,通过具体的实例来帮助开发者提升效率和代码质量。 首先,我们来讨论一些基本的JSP编程技巧: 1. **使用EL(Expression Language)**:EL是...
本篇将详细讲解"JSP编程小技巧集锦121"中的核心知识点,帮助开发者提升效率,优化代码。 1. **使用EL表达式(Expression Language)**:EL简化了从作用域内获取对象的复杂性。例如 `${variable}` 可以直接获取到...
### PHP 文件上传后端处理小技巧详解 #### 一、引言 在Web开发中,文件上传是一项常见的功能需求。特别是在使用PHP进行后端开发时,掌握高效的文件上传处理技巧对于提升用户体验、优化服务器资源利用至关重要。...
网页设计和开发是一个充满创新和策略的领域,其中许多小技巧可以显著提升用户体验和网站功能。以下是一些基于"40种网页常用小技巧"的详细解读,这些技巧旨在优化网页设计并提供更好的互动性。 1. 取消右键:通过...
根据给定的文件信息,以下是对“js200多个小技巧”中提及的部分知识点的详细解析: ### 1. HTML事件与JavaScript交互 - **`onBlur`**:当元素失去焦点时触发的事件。在示例中,用于检测输入框是否为空,并在失去...
通过收集并分享一系列HTML与CSS的小技巧,可以显著提升网页设计的效率与质量。以下是对标题“制作网页中Html+css小技巧收集”及描述中提到的知识点进行的详细解析: ### 1. 控制元素高度和溢出 在CSS中,`overflow...
### 电脑小技巧与问题处理方法 在日常生活中,我们经常需要用到电脑来完成各种任务,无论是工作、学习还是娱乐。然而,在使用过程中难免会遇到一些小问题或希望掌握一些提高效率的方法。本文将针对给定文件中的部分...
以下是一些JavaScript的小技巧和知识点: 1. **事件源对象**: `event.srcElement` 可以用来获取触发事件的元素,比如点击事件的触发元素。而 `event.srcElement.tagName` 和 `event.srcElement.type` 分别可以获取...
HTML是超文本标记语言,是构建网页的基础,而掌握一些特殊的HTML技巧能够使网页的呈现效果更加丰富多彩。本文将深入探讨HTML与CSS结合使用的几个重要技巧,包括CSS滤镜效果、定位技术、自适应圆角矩形的创建,以及...
以下是一些关于"html js的一些实用技巧"的详细知识,这些技巧对于初学者来说尤其有价值。 1. **DOM4J**: DOM4J是一个Java库,用于处理XML文档。`dom4j目前最好据说.doc`可能详细介绍了DOM4J的高效性和灵活性,如...
以上就是根据提供的文件内容整理的一些JavaScript小技巧,这些技巧覆盖了事件处理、DOM操作、表单与链接操作、特殊字符处理等多个方面,希望对大家有所帮助。在实际开发中,灵活运用这些技巧可以极大地提高工作效率...
以下是一些JavaScript的基本小技巧和知识点: 1. **输出语句**:`document.write("")` 可用于在HTML文档中输出内容,但在页面加载完成后使用可能会覆盖已有的HTML。 2. **注释**:在JavaScript中,单行注释使用 `/...
HTML5设计是一个不断发展的领域,充满了创新和小技巧。这篇分享涵盖了12个不常见的HTML5设计技巧,旨在提升用户体验和网页性能。 1. **交互设计:慎用向右滑动** - 在设计中,避免将关键交互设置为向右滑动,因为在...
... ... 此函数用于从指定的文件中读取数据。 ... $fd = fopen($file_name, 'r');...以上就是从提供的PHP代码片段中总结出来的小技巧和功能说明。这些技巧可以帮助开发者更好地理解和应用PHP语言,提高开发效率。
以下是一些关于JS的实用小技巧,对于初学者来说,掌握这些知识点将有助于提升编程效率和理解力。 1. `document.write("")`:这是一个常用的输出语句,常用于在页面加载时动态插入HTML内容。 2. 注释:JS支持单行...
本文将基于“JavaScript小技巧一箩筐”这一主题,深入探讨一系列实用的JavaScript技巧,涵盖事件处理、DOM操作、表单控制、定时器使用等多个方面,旨在帮助开发者提升代码效率与网站性能。 #### 事件处理与键盘操作...