黑马程序员_Dom学习知识简单总结
来源:互联网 发布:网络屏蔽器 编辑:程序博客网 时间:2024/05/22 14:48
---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------
Dom:
Document Object Model(文档对像模型)
CSS+JavaScript+Dom=DHTML
Dom具有对Html文件和XML文件元素的访问控制能力,简单点说利用Dom可以对某个html或xml文件添加,修改,删除元素.更改其现有的结构或内容.
Dom就是讲怎样通过javascript来操作界面上的控件,只有通过Dom,JS才能全部发挥出来
Dom就是HTML页面的模型,将每个标签作为一个对象,javascript通过调用Dom中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。
比如通过操作文本框的Dom对象就可以读取文本框中的值、设置文本框中的值
可以把javascript跟Dom的关系 理解为C#跟.Net Framwork的关系一样,就是一个是编程语言,一个是框架
Dom也像WinForm一样,通过属性、事件、方法进行编程
HTML Dom中最常用的查找元素的几个方法
引用当前整个网页文档:document(document.title 标题属性)
快速在网页中查找某一元素:getElementById
查找一组标签,具有相同名称的标签元素:getElementsByTagName
根据标签的Id属性值或name属性来查找多个元素:getElementsByName
Dom中创建,添加,删除,修改,替换,复制,网页中的标签和文本内容的方法
在网页中的创建一个标签元素:createElement
创建一段文本内容:createTextNode
向网页中添加元素:appendChild
删除元素的Dom方法是:removeChild
修改网页中标签元素的属性:setAttribute
替换已存在的标签或元素:replaceChild
复制克隆已存在的标签或元素:cloneNode
获取和修改元素内的html标签与文本内容:innerHTML
获取或修改元素的文本内容,仅支持IE:innerText
获取或修改元素的文本内容,支持火狐:textContent
HTML Dom中还专门提供了一组接口用来操作网页中的表格Table元素
insertRow方法可以为表格增加一行
deleteRow删除表格中一行
insertCell方法可以为表格某行中增加一列
deleteCell删除行中的一列
createCaption方法可以为表格创建一个标题(*)
createThead方法可以为表格创建一个Thead(*)
createTFoot方法可以为表格创建一个TFoot(*)
引用表格中所有行的属性为:rows
引用表格中某行的所有列:cells
移动表格中的行,只支持IE:moveRow
动态设置事件
可以再代码中动态设置响应事件,就想.Net委托的+=一样,比如我要双击的时候才触发
<script type="text/javascript"> function f1() { alert("我是f1"); } function f2() { alert("我是f2"); } </script><input type="button" onclick="document.ondblclick=f1" value="按钮">点击button1,文本双击的事件就会被关联,双击文本就会触发f1注意:f1不要加括号 不同于onclick="f1()",此时需要加()
window对象
window对象代表当前浏览器的窗口,使用window对象的属性、方法的时候可以省略window,比如window.alert('a')可以省略成alert('a');
alert方法:弹出对话框
创建confirm方法:显示确定、取消对话框,如果按了【确定】,就返回true,否则返回false
function confirmDemo(){ if(confirm("是否继续?")){ alert("确定"); } else{ alert("取消"); } } <input type="button" onclick="confirmDemo()" value="确认取消提示框" />
navigate 链接另一个网址
<input type="button" onclick="navigate('HTMLPage1.htm')" value="navigate链接另一个网址" />
注意:navigate不支持火狐浏览器
setInterval 定时执行
每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为建个时间(单位毫秒),返回值为定时器的标识
页面动态显示时间:
document.write("<span id=time></span>"); setInterval("time.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());", 1000) 注意执行的代码是字符串的格式,也可以写一个匿名函数
走马灯:
<head> <title>你现在在哪里呢?</title> <script type="text/javascript"> function leftscroll() { var title = document.title; var firststr = title.charAt(0); var leftstr = title.substring(1, title.length); document.title = leftstr + firststr; } var interval = setInterval("leftscroll()", 500); </script></head><body></body></html>
clearInterval 取消setInterval的定时执行
相当于Timer中的Enabled=False。因为setInterval可以设定多个定时,所以clearInterval要制定清除那个定时器的标识,即setInterval的返回值
var interval=setInterval("alert('hello')",2000); <input type="button" onclick="clearInterval(interval)" />
如果直接写在onclick事件中,那么每点击一次,就会new一个新的setInterval
<input type="button" value="setInterval" onclick="setInterval('alert(hello)',1000)">
如果在clearInterval里边直接写setInterval('alert(hello)',1000) ,它只是停止你当前的setInterval,你new的别的还会照常走,所以,要给setInterval定义一个返回值,将返回
在clearInterval里边
<input type="button" value="setInterval" onclick="TimerId = setInterval('alert(hello)',1000)"> <input type="button" value="clearInterval" onclick="clearInterval(TimerId)">
setTimeout 也是定时执行,但不像setInterval那样是重复的执行,只执行一次
clearTimeout也是清除定时,用法跟setInterval一样
showModalDialog()弹出模态对话框 第一个参数为弹出模态窗口的页面地址
showModelessDialog()弹出非模态窗口,参数等和showModadDialog一样
注意:showModalDialog必须在onClick等用户手动触发的事件中才会执行,否则可能会被最新版的浏览器当成广告弹窗而拦截
<input type="button value="模态对话框" onclick="showModalDialog('HTMLPage1.htm')" /><input type="button" value="非模态对话框" onclick="showModelessDialog('HTMLPage2.htm')" />
body、document对象的事件
(1)onload:网页加载完毕时触发,浏览器是一边下载文档、一边解析执行,可能会出现JavaScript执行时需要操作某个元素,这个元素还没有加载,如果这样就要把操作
代码放到onload事件中,或者可以吧JavaScript放到元素之后
就比如我把JS脚本放在网页最前边,需要改里边空间的属性,此时空间还没加载出来,页面就会报错,这时就应该讲代码放到onload事件中,页面加载时就会加载对应性
元素的onload事件是元素自己加载完毕时触发,body 的onload是全部加载完毕时触发
(2)onunload:网页关闭(或者离开)后触发
写在body里边在页面加载的时候就将其加载
<body onunload="alert('你要走了...')">
(3)onbeforeunload:在网页准备关闭(或者离开)后触发。
在时间中为"window.event.returnValue"赋值(要显示的警告信息),这样窗口离开(比如前进、后退、关闭)就会弹出确认信息
<body onbeforeunload="window.event.returnValue='这的要放弃发帖退出吗?'">
其他事件
onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeypress(点击按键)、onkeyup(按键释放)、onmousedown(鼠标按下)onmousemove(
标移动)、onnouseout(鼠标离开元素范围)、onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)等。
window对象的属性
window.location
location.href:重定向,和navigate方法效果一样
location.reload():刷新页面
<input type="button" value="href" onclick="location.href('走马灯.htm')" /><input type="button" value="Refresh" onclick="location.reload(window.htm)" /> //window.htm为自身页面
window.event (是非常重要的属性)
用来获得发生事件时的信息,事件不局限与window对象的事件,所有元素的事件都可以通过event属性取到相关信息,类似于winform中的e(EventArg)
altkey属性:bool类型,表示发生事件时alt键是否被按下,类似的好友ctrlkey,shiftkey,
<input type="button" value="event" onclick="if(window.event.altKey){alert('alt')}else{alert('...')}" />
clientX,clientY 发生事件时鼠标在客户区的坐标
window.event.clientX、window.event.clientY window.event用法都类似
screenX,screenY 发生事件时鼠标在屏幕上的坐标
offsetX,offsetY 发生事件时鼠标在事件源的坐标(比如要知道点击按钮时鼠标在按钮的那个位置)
returnValue属性:如果将returnValue设置为false,就会取消默认事件的处理
srcElement:获得事件源的对象 window.event.srcElement取的引发事件的控件
keyCode:发生事件时的按键值
buton:发生事件时鼠标按键,1为左键,2为右键,3为同时按下
(*)screen对象,屏幕的信息 用到的不多
alert("分辨率:"+screen.width+"*"+screen.height);
if(screen.width<1024||screen.height<768)
{ alert("分辨率太低!"); }
clipboardData对象,对粘贴板的操作
clear("Text") 清空粘贴板,getData("Text") 读取粘贴板的值,返回值为粘贴板中的内容,setData("Text",val) 设置粘贴板中的值。setData("Text",val) 复制
几乎所以的元素都有oncopy(复制)、onpaste(粘贴)事件。
当赋值的时候body的oncopy事件被触发,直接return false就是阻止复制
<input type="text" oncopy="alert('请勿复制!');return false;" />
<input type="text" onpaste="alert('请勿粘贴!');return false;" />
在网站中复制文章的时候,为了防止拷贝不加出处,就需要 自动在复制的内容后添加版权声明。
function modify() {
var txt = clipboardData.getData("Text");
txt = txt + "本文来自哪,转载请注明来源。" + location.href;
clipboardData.setData("Text",txt);
}
<input type="text" oncopy="setTimeout('modify()',100)" />
用户复制动作发生0.1秒以后再去改粘贴板中的内容,100为0.1秒 写10,100 200随便多少都行不能直接在oncopy中执行对粘贴板的操作,因此设定定时器,0.1秒后行
这样就不再oncopy的执行调用栈上了。
history操作历史记录
window.history.back() 后退 window.history.forward() 前进 也可以用 window.history.go(-1) window.history.go(1) 来实现页面的前进后退效果
如:在第一个页面链接指向第二个页面,然后第二个页面再返回到第一个页面
第一个页面:
<a href="HistoryBack.htm">进入第二页</a>
第二个页面:
<a href="javascript:history.back()">后退</a>
<input type="button" value="后退" onclick="history.back()" />
document属性
document的方法:
1.write:想文档中写入内容。 writeln 在write之后添加一个回车()相当于C#的Console.Write()和Console.WriteLine()
<script type="text/javascript"> document.write("<a href='History.htm'>百度</a>") </script> <input type="button" value="你好" onclick="document.write('你好!')" />
在onclick等事件中写的代码会冲掉页面的内容,只有在页面加载的过程中才会与原有的内容融合在一起
2.getElementById(非常有用)根据元素的id获得对象,网页中的id不能重复。也可以直接通过元素的id来引用元素,但是有有效范围之类的问题,所以不建议通过id操
元素,而是通过getElementById
3.getElementsByName,根据元素的name获得对象,因为页面中的元素的name可以重复(多个radiobutton的name都一样),所以getElementByName返回值是对象
组
4.(*)getElementsByTagName 获得指定标签名的元素数组,比如getElementByTagName("p")可以获得所有的<p>标签
<html><head> <title></title> <script type="text/javascript"> document.write("<a href='History.htm'>百度</a>") //为制定id的元素赋值 function getEle() { var text = document.getElementById("txt"); alert(text.value); } //为所有同name属性的标签赋值 function btnclick() { var radios = document.getElementsByName("gender"); for (var i = 0; i < radios.length; i++) { var radio = radios[i]; alert(radio.value); } } //为所有的标签元素赋值 function all() { var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.value = "hello"; } } </script></head><body><input type="button" value="你好" onclick="document.write('你好!')" /><input type="text" id="txt" /><input type="button" value="按钮" onclick="getEle()"><input type="radio" value="男" name="gender" />男<input type="radio" value="女" name="gender" />女<input type="radio" value="保密" name="gender" />保密<input type="button" value="click" onclick="btnclick()" /><input type="text" /><input type="text" /><input type="text" /><input type="button" value="hello" onclick="all()"></body></html>
DOM的动态创建
可以调用document的createElement方法来创建具有制定标签的DOM对象,然后通过调用元素的appendChild方法将新创建元素添加到相应的元素下
function btnClick() { var divMain = document.getElementById("divMain"); var input = document.createElement("input"); //创建一个标签名为input的元素(这是还没有添加任何元素上,所以没有显示) input.value = "被创建的"; input.type = "button"; divMain.appendChild(input); //将创建的input添加到div层中 } <input id="create" type="button" value="动态创建" onclick="btnClick()"/> <div id="divMain"></div>
createElement的两种方法,注意innerText的问题
var input=document.createElement("<input type='buton' value='hello' />")>
用此方法能快速创建元素,并且赋值但是注意设置的inner部分不会被设置
innerText、innerHTML 一个修改文本可以使用HTML语言,一个不可以 注意:火狐浏览器不支持innerText
几乎所有的DOM元素都有innerText、innerHTML属性(注意大小写)
<a href="http://www.baidu.com" id="link1">百嘟嘟嘟嘟嘟嘟<font color="red">度</font>百科</a> <input type="button" value="innerText" onclick="alert(document.getElementById('link1').innerText)"> <input type="button" value="innerHTML" onclick="alert(document.getElementById('link1').innerHTML)"> <input type="button" value="修改innerText" onclick="document.getElementById('link1').innerText='百度'" /> <input type="button" value="修改innerHTML" onclick="document.getElementById('link1').innerHTML='<font color=Black>百度</font>'" />
用innerHTML也可以替代createElement, 不过只能创建一次,相当于将标签中的内容替换
function btnClick(){ var divMain = document.getElementById("divMain"); divMain.innerHTML="<input type='button' value='HTML创建' />"; } <div id="divMain"></div> <input type="button" value="替换create" onclick="btnClick()" />
innerHTML创建动态超链接
function clicka() { var divHTML = document.getElementById("divHTML"); var a = document.createElement("a"); a.href = "http://www.baidu.com"; a.innerText = "百度"; divHTML.appendChild(a); <div id="divHTML"></div> <input id="new" type="button" value="超链接" onclick="clicka()" />
动态创建表格同时支持IE跟火狐的两种方法 ,如果表格里边没有tbody标签,火狐浏览器是不支持appendChild方法的
Dom动态创建的代码是看不到的,可以用DebugBar 里边看。
在标准DOM中添加元素一般用appendChild(),但在JS中添加失效,原因是IE6,IE7不支持table.appendChild("tr")
解决方法: 在动态添加比个中加一个<tbody></tbody>标签,然后再往表格中添加的时候加tBodies[0]
<html><head> <title></title> <script type="text/javascript"> function LoadData() { var data = { "百度": "http://www.baiduc.com", "新浪": "http://www.sina.com", "传智": "http://www.itcast.com" }; var link = document.getElementById("links"); for (var key in data) { var value = data[key]; var tr = document.createElement("tr"); //先创建一行的对象在内存中,之后再将其加载进来 var td1 = document.createElement("td"); td1.innerText = key; tr.appendChild(td1); var td2 = document.createElement("td"); td2.innerHTML = "<a href='" + value + "'>" + value + "</a>"; tr.appendChild(td2); link.tBodies[0].appendChild(tr); } } function LoadData2() { var data = { "百度": "http://www.baiduc.com", "新浪": "http://www.sina.com", "传智": "http://www.itcast.com" }; var links2 = document.getElementById("links2"); for (var key in data) { var value = data[key]; var tr = links2.insertRow(-1); //先插入一格,然后再对其进行赋值 var td1 = tr.insertCell(-1); td1.innerText = key;//(火狐不知处innerText) var td2 = tr.insertCell(-1); td2.innerHTML = "<a href='" + value + "'>" + value + "</a>"; } } </script></head><body><table id="links"><tbody></tbody></table><input type="button" value="表格连接" onclick="LoadData()" /><table id="links2"></table><input type="button" value="表格连接2" onclick="LoadData2()" /></body></html>
事件冒泡
如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick事件也会被触发。触发的顺序是“由内而外”的,
比如: 在页面上添加一个table、table里边有tr、tr里有td、td里边放一个p,然后每个都添加onclick事件,p的事件触发,网上美一级的事件都会被触发
<body onclick="alert('body click')"><table onclick="alert('table click')"> <tr onclick="alert('tr click')"> <td onclick="alert('td click')"> <p onclick="alert('p click')">p的事件冒泡</p> </td> </tr></talbe></body>
其他事件
this
this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件,在事件响应函数调用的函数中不能使用,如果要使用可以将this传递给函数或者使用
this和event.srcElement的语义是不一样的,this就是表示当前监听的事件对象,event.srcElement是引发事件的对象
<input type="button" value="event点击" onclick="alert(event.srcElement.value)" />
<input type="button" value="this点击" onclick="alert(this.value)" />
<!--this只能在事件响应函数中才能获得,不能写在js中-->
如果非要写在js脚本中,那么在调用方法的时候讲this传过去就行了。 而用window.event.srcElement就可以写在js脚本中
通过Dom修改CSS样式
修改元素的样式不是设置class属性,而是修改className属性。 Dom中有少数属性是与JS不一样的。
<style type="text/css"> .Day { background-color:Yellow; } .Night { background-color:Blue; } </style><body><div id="divTest" class="Day"> <font color="Red">你好吗?</font></div><input type="button" value="关灯" onclick="document.getElementById('divTest').className='Night';" />
通过Dom修改CSS样式2 style.属性名
在JS中 (-) 是有特殊含义的,单独修改样式的属性要使用"style"属性名。
注意:在CSS中属性名和在JavaScript中操作的时候属性名可能不一样,主要集中在那些属性名中含有 - 的属性,因为JavaScript中 - 不能做属性、类名的。
所以CSS中背景颜色是background-color,而JavaScript中则是style.background;
元素的样式名为class,而JavaScript中是className;
font-size -> style.fontSize; margin-top -> style.marginTop
单独修改控件的样式
<input type="button" value="AAA" onclick="this.style.color='red'" /> //this.style.color='red'修改字体的颜色 this.style.background='red'修改背景颜色
onfocus获得焦点事件 onblur失去焦点事件(Dom练习中有用到)
通过程序控制层的显示和隐藏 修改style.display
display没有值就是显示,为none为不显示
<html><head> <title></title> <script type="text/javascript"> function ShowDiv(cb) { var div1 = document.getElementById("div1"); if (cb.checked) { div1.style.display = '';//display没有值就是显示,为none为不显示 } else { div1.style.display = 'none'; } } </script></head><body><input type="checkbox" id="cbShow" onclick="ShowDiv(this)" /><label for="cbShow">显示高级选项</label><div id="div1" style="display:none">高级选项</div></body></html>
IE中body的事件范围(火狐也差不多)
IE中如果在body上添加onclick、onmousemove等事件相应,那个如果页面没有满,则body中最后一个元素一下(横向不限制)的部分就无法响应事件,必须使用代码
document上监听那些事件
比如:document.onmousemove = 函数名;
<head> <title></title> <script type="text/javascript"> function f() { alert("hello"); } document.onclick = f; </script></head><body><!--如果在body里边加onclick事件,它就会只在开始地一行响应事件,而下边不会,所以,要下载document.onclick里边监听整个文档--></body>
元素的位置、大小单位
通过Dom读取元素的top、left、width、height等取到的值不是数字,而是"XXpx"这样的字符串
为这些属性设置的时候IE可以是80,90 而在火狐下必须是"80px"、"90%"这样的字符串,所以考虑到兼容性,最好用字符串格式
<head> <title></title> <script type="text/javascript"> function AddWidth() { var addwidth = document.getElementById("div1").style.width; addwidth = parseInt(addwidth, 10); addwidth += 50; addwidth += "px"; document.getElementById("div1").style.width = addwidth; } </script></head><body><div id="div1" style="width:50px;height:50px;border-style:solid;border-color:Yellow;border-width:1px">123123123</div><input type="button" value="自动加宽" onclick="AddWidth()" /></body>
层的操作
position元素的样式值:static(无定位,显示在默认位置)、absolute(绝对定位)、fixed(相对于窗口的固定定位,位置不会随着浏览器的滚动而变化,IE6不支持)
relative(相对元素默认位置的定位)
如果要通过代码修改元素的坐标则一般使用adsolute,然后修改元素的top(上边缘距离)、left(左边缘距离)两个样式值
<input type="button" value="按钮" style="position:absolute;top:200px;left:200px" />
注意:在层中英文字母连续单词不会再中间自动换行
类似论坛登录对话框(img图片自己找一个放进去就OK)
<head> <title></title> <script type="text/javascript"> function showLogin() { var login = document.getElementById("loginDiv"); login.style.display = ''; } function hideLogin() { var login = document.getElementById("loginDiv"); login.style.display = 'none'; } </script></head><body><a href="javascript:showLogin()">登陆</a><div style="position:absolute; top:200px;left:500px;border:solid 1px Yellow; display:none" id="loginDiv"><img src="img/close.JPG"style="float:right" onclick="hideLogin()" /><table> <tr> <td><label for="username">登录名:</label></td> <td><input type="text" id="username" /></td> </tr> <tr> <td><label for="password">密码:</label></td> <td><input type="text" id="password" /></td> </tr></table></div></body>
form对象(编程操作表单)
form对象是表单的Dom对象
方法:submit()提交表单,但是不会触发onsubmit事件
普通按钮是没有submit效果的,如果submit也想有submit的效果,可以给表单设置一个id,然后根据form的id获得submit方法
<input type="button" value="普通按钮" onclick="document.getElementById('id').submit()" />
触发一个按钮的onclick事件,注意:触发按钮事件不是onclick事件,而是调用它的click()方法
<input type="button" value="按钮1" onclick="你干嘛要点击我" />
<input type="button" value="触发按钮1" onclick="documeng.getElementById("btn1").click()" />
触发submit按钮效果(一般用于鼠标离开焦点或者内容更改之后自动提交)
<input type="text" value="触发按钮1" onblur="documeng.getElementById("form1").submit()" />
再点击submit后form的onsubmit事件被触发,在onsubmit中可以进行数据校验,数据有问题,返回false即可取消提交
<form name="form1" action="a.aspx" method="get" onsubmit="if(document.getElementById('txtname').value.length<=0){alert('姓名不能为空');return false;}">
注意:submit按钮 如果直接在form的onsubmit事件中返回false,那么表单不会提交
但是在普通按钮中调用form的submit方法是不受影响的,即使在form的onsubmit事件中返回false,它照样还是可以提交
不同浏览器的差异
不同的浏览器对DOM支持的方法也不一样
获取网页中那个元素触发了事件:在IE中使用srcElement;在火狐中使用target
使用Dom获取和更改文本标签元素内文本:在IE中使用innerText;在火狐中使用textContent
动态为网页或者元素绑定事件:在IE中绑定事件的方法时attachEvent;在火狐中绑定事件的方法是:addEventListener
......
不同浏览器中对CSS的支持也不一样,所有就会有IE显示正常,火狐下就全乱了。
解决的方法就是使用JQuery
JQuery之类的框架进行了封装,将不同的浏览器的差异帮开发人员处理了,开发人员只要调用JQuery的方法。
JQuery会帮助在不同浏览器中进行翻译。用JQuery就可以解决不同浏览器上Dom的不同。
但是对于CSS,那就只能对不同的浏览器做不同的样式,所以,做网页一般都在各个浏览器中测试一下(比较有代表的IETester(IE不同的版本支持都不同)、火狐、谷歌)
弹出对话框的处理
给对话框传递参数,使用showModalDialog的第二个参数传递参数,在对话框中用window.dialogArguments获得传递的参数值;对话框中给window.parent.returnValue设定返
回值,这样在父窗口中就可以通过showModalDialog返回值读取设置的返回值了。
JS中的正则表达式
javascript中创建正则表达式类的方法:
var regex=new RegExp("\\d{3}") 或者var regex =^d{5}/.../ ...为正则表达式
/表达式/是javascript中专门为简化正则表达式编写而提供的语法,写在//中的正则表达式就不用管转义符了。
RegExp对象的方法:
test(str)判断字符串str是否匹配正则表达式,相当于C#中的IsMatch
var regex=/.+@.+/;
alert(regex.test("123@s.com")); 符合正则表达式,返回true
alert(retex.test("123.123.123")); 不符合,返回false
exec(str)进行搜索匹配,返回值为匹配结果
compile 编译表达式,提高运行速度
string的正则表达式方法
String队形中提供了一些与正则表达式相关的方法,相当于对于RegExp类的包装,简化调用:
match(regexp),相当于exec(进行匹配组)
var s="aaa@live.com";
var regex=/(.+)@(.+)/ (匹配组则需要将匹配的内容用括号括起来 RegExp.$1就表示匹配出来的第一组)
alert(RegExp.$1); 取的第一组
alert(RegExp.$2); 取的第二组
文本框的一些基本功能
回车实现Tab跳转。 需要相应文本框的onKeyDown事件
<body onKeyDown="if(window.event.KeyCode==13){window.event.KeyCode=9;}"> (不知道是我本的问题还是什么原因,onkeydown事件就是无法触发,不过代码绝对对着呢)
注意:只有少数的键才能被替换,大部分是不行的,有权限问题
禁用输入法。ime-mode:disabled
<input type="text" style="ime-mode:disabled" />
只能输入数字,及关联的一些字符
function number() {
var k = window.event.keyCode;
if ((k == 9) || (k == 13) || (k == 46) || (k == 8) || (k == 189) || (k == 109) || (k == 110) || (k = 190) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40)) {
}
else {
return false;
}
onkeyDown="return numonKeyDown()"调用。
区分事件响应函数和事件响应函数调用的函数,不能写成onkeyDown="numonKeyDown()"
禁止粘贴
onpaste="return false" 这种方法太绝对,就是不允许粘贴
还可以在onpaste中通过clipboardData.getData('Text')取到粘贴板中的值,然后遍历每个字符,看是否是合法的值,如果全部是合法的值才能允许粘贴,只要有一个非法制
禁止粘贴
<html><head> <title></title> <script type="text/javascript"> function isNum(k) { return ((k == 9) || (k == 13) || (k == 46) || (k == 8) || (k == 189) || (k == 109) || (k == 110) || (k = 190) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40)); } function numKeyDown() { var k = window.event.keyCode; return isNum(k); } function numPaste() { var text = clipboardData.getData("Text"); for (var i = 0; i < text.length; i++) { var asc = text.charCodeAt(i); if (!isNum(asc)) { return false; } } } </script></head><body><input type="text" onpaste="return numPaste()" style="ime-mode:disabled" onkeydown="return numKeyDown()" /></body></html>
keyCode小键盘和主键盘区的有些键值是不一样的 ascii码则一样
说明:
8:退格键
46:delete键
37-40:方向键
48-57:小键盘区的数字
96-105:主键盘区的数字
110、190:小键盘区和主键盘区的小数点
---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------
详细请查看:http://edu.csdn.net/heima/
- 黑马程序员_Dom学习知识简单总结
- 黑马程序员_Dom的学习总结
- 黑马程序员_HTML学习知识简单总结
- 黑马程序员_JQuery学习知识简单总结
- 黑马程序员_Dom
- 黑马程序员_DOM
- 黑马程序员_学习日记17_Dom(1)
- 黑马程序员_学习日记18_Dom(2)
- 黑马程序员_DOM获取节点
- 黑马程序员_ADO.NET学习知识总结
- 黑马程序员_DOM概述和DHTML简述
- 黑马程序员_DOM(文档对象模型)
- 【黑马.net程序员】学习ADO.net和SQL知识总结
- 黑马程序员_C#面向对象学习知识总结1
- 黑马程序员_C#面向对象学习知识总结2
- 黑马程序员之HTML学习笔记:HTML相关知识总结
- 黑马程序员-反射知识总结
- 黑马程序员_WinForm知识总结
- 黑马程序员-学习笔记1—c#基础知识。。。
- File in Java
- .Net GridView应用:多表头固定+分组+总计
- Notice: Undefined variable另类处理方法
- [急]小妹真心求助Delphi高手,幫忙修改一段Delphi7寫出來的代碼~~
- 黑马程序员_Dom学习知识简单总结
- spring报no matching editors or conversion strategy found
- Activity中EditText焦点问题
- unicode编码转汉字
- C++第12周项目5——特殊三位数
- 第四篇 ANDROID窗口管理服务实现机制
- Android 服务器推送技术
- myEclipse8.5进行单步调试的方法
- CCTextFieldTTF 用法