`

html处理的小技巧

    博客分类:
  • 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, ' ')) "

分享到:
评论

相关推荐

    HTML的一些小技巧

    ### HTML的一些小技巧 在网页开发过程中,合理运用HTML的小技巧可以有效提升用户体验,优化页面布局及功能。本文将详细介绍给定文件中的多个HTML小技巧及其应用场景。 #### 1. 设置背景图片固定不滚动 ```html ...

    网页代码常用小技巧

    "网页代码常用小技巧"这个主题涵盖了一系列能够提升HTML编写效率和优化网页效果的方法。 1. **元信息与头部元素**: HTML文档的部分常常被用来放置元信息,如字符编码、页面标题、样式表链接、JavaScript文件引用...

    Javascript小技巧之生成html元素.docx

    1. **JavaScript小技巧整理篇(特别全)**:这篇文章汇总了许多JavaScript编程中的实用技巧,包括但不限于变量处理、函数运用、事件处理等方面。 2. **javascript同步服务器时间和同步倒计时小技巧**:讲解如何用...

    (菜鸟必看的)电脑实用小技巧

    【电脑实用小技巧】是众多用户在日常使用电脑过程中可能会遇到的问题和解决方案的集合,旨在帮助初学者提高电脑操作效率,解决常见问题。这个压缩包包含了一系列的HTML文档,涵盖了多个方面的电脑技术知识。 首先,...

    JSP编程小技巧集锦121例子(.txt 版本)

    "JSP编程小技巧集锦121例子"这个资源显然提供了大量实用的JSP开发经验,通过具体的实例来帮助开发者提升效率和代码质量。 首先,我们来讨论一些基本的JSP编程技巧: 1. **使用EL(Expression Language)**:EL是...

    JSP编程小技巧集锦121

    本篇将详细讲解"JSP编程小技巧集锦121"中的核心知识点,帮助开发者提升效率,优化代码。 1. **使用EL表达式(Expression Language)**:EL简化了从作用域内获取对象的复杂性。例如 `${variable}` 可以直接获取到...

    php文件上传后端处理小技巧_.docx

    ### PHP 文件上传后端处理小技巧详解 #### 一、引言 在Web开发中,文件上传是一项常见的功能需求。特别是在使用PHP进行后端开发时,掌握高效的文件上传处理技巧对于提升用户体验、优化服务器资源利用至关重要。...

    40种网页常用小技巧

    网页设计和开发是一个充满创新和策略的领域,其中许多小技巧可以显著提升用户体验和网站功能。以下是一些基于"40种网页常用小技巧"的详细解读,这些技巧旨在优化网页设计并提供更好的互动性。 1. 取消右键:通过...

    js200多个小技巧

    根据给定的文件信息,以下是对“js200多个小技巧”中提及的部分知识点的详细解析: ### 1. HTML事件与JavaScript交互 - **`onBlur`**:当元素失去焦点时触发的事件。在示例中,用于检测输入框是否为空,并在失去...

    制作网页中Html+css小技巧收集

    通过收集并分享一系列HTML与CSS的小技巧,可以显著提升网页设计的效率与质量。以下是对标题“制作网页中Html+css小技巧收集”及描述中提到的知识点进行的详细解析: ### 1. 控制元素高度和溢出 在CSS中,`overflow...

    有关电脑的小技巧和问题的处理

    ### 电脑小技巧与问题处理方法 在日常生活中,我们经常需要用到电脑来完成各种任务,无论是工作、学习还是娱乐。然而,在使用过程中难免会遇到一些小问题或希望掌握一些提高效率的方法。本文将针对给定文件中的部分...

    javascirpt 小技巧 javascirpt 小技巧

    以下是一些JavaScript的小技巧和知识点: 1. **事件源对象**: `event.srcElement` 可以用来获取触发事件的元素,比如点击事件的触发元素。而 `event.srcElement.tagName` 和 `event.srcElement.type` 分别可以获取...

    HTML特殊技巧,常用技巧

    HTML是超文本标记语言,是构建网页的基础,而掌握一些特殊的HTML技巧能够使网页的呈现效果更加丰富多彩。本文将深入探讨HTML与CSS结合使用的几个重要技巧,包括CSS滤镜效果、定位技术、自适应圆角矩形的创建,以及...

    html js的一些实用技巧

    以下是一些关于"html js的一些实用技巧"的详细知识,这些技巧对于初学者来说尤其有价值。 1. **DOM4J**: DOM4J是一个Java库,用于处理XML文档。`dom4j目前最好据说.doc`可能详细介绍了DOM4J的高效性和灵活性,如...

    javascript小技巧,含有多种特效,实用功能

    以上就是根据提供的文件内容整理的一些JavaScript小技巧,这些技巧覆盖了事件处理、DOM操作、表单与链接操作、特殊字符处理等多个方面,希望对大家有所帮助。在实际开发中,灵活运用这些技巧可以极大地提高工作效率...

    javascript小技巧-js小技巧收集.doc

    以下是一些JavaScript的基本小技巧和知识点: 1. **输出语句**:`document.write("")` 可用于在HTML文档中输出内容,但在页面加载完成后使用可能会覆盖已有的HTML。 2. **注释**:在JavaScript中,单行注释使用 `/...

    12个不为大家熟知的HTML5设计小技巧

    HTML5设计是一个不断发展的领域,充满了创新和小技巧。这篇分享涵盖了12个不常见的HTML5设计技巧,旨在提升用户体验和网页性能。 1. **交互设计:慎用向右滑动** - 在设计中,避免将关键交互设置为向右滑动,因为在...

    php代码中的小技巧

    ... ... 此函数用于从指定的文件中读取数据。 ... $fd = fopen($file_name, 'r');...以上就是从提供的PHP代码片段中总结出来的小技巧和功能说明。这些技巧可以帮助开发者更好地理解和应用PHP语言,提高开发效率。

    js中的小技巧,十分的实用

    以下是一些关于JS的实用小技巧,对于初学者来说,掌握这些知识点将有助于提升编程效率和理解力。 1. `document.write("")`:这是一个常用的输出语句,常用于在页面加载时动态插入HTML内容。 2. 注释:JS支持单行...

    Javascript小技巧一箩筐

    本文将基于“JavaScript小技巧一箩筐”这一主题,深入探讨一系列实用的JavaScript技巧,涵盖事件处理、DOM操作、表单控制、定时器使用等多个方面,旨在帮助开发者提升代码效率与网站性能。 #### 事件处理与键盘操作...

Global site tag (gtag.js) - Google Analytics