在这篇博客里面我们主要讲述了form对象，以及写JavaScript代码的时候不同浏览器之间的差异和在JavaScript中使用正则表达式的一些知识点，接下来我们做了两个练习来说明了这些知识点，那就是：回车实现Tab跳转和全额文本框。
form对象
(1) 先来写段代码举例说明一下吧
| 代码如下 | 复制代码 |
|
<form id="form1" action="ball.htm" onsubmit="if(document.getElementById('name').value.length<=0){alert('不能为空');return false;}"> <input type="text" id="name" onblur="document.getElementById('form1').submit()" /> <input type="button" id="btn1" onclick="alert('我惦记了')" value="一个按钮" /> <input type="button" value="我最先提交" onclick="document.getElementById('btn1').click()" /> <input type="button" value="提交吧" onclick="document.getElementById('form1').submit()" /> <input type="submit" value="验证Form" /> </form> |
|
(2) form对象是表单的Dom对象
(3) 方法：submit提交表单，但是不会触发onsubmit事件。
(4) 实现autopost,也就是焦点离开控件以后页面页面立即提交，而不是只有提交submit按钮以后才提交，当光标离开的时候出发onblur事件，在onblur中调用form的submit方法。
(5) 再点击submit后form的onsubmit事件被触发，在onsubmit中可以进行数据校验，数据有问题，返回false既可以取消提交。
例题说明：
| 代码如下 | 复制代码 |
|
<form id="form1" action="dongoto.htm"> <select onchange="document.getElementById('form1').submit()"> <option>吉林</option> <option>甘肃</option> <option>北京</option> </select> <input type="submit" /> </form> |
|
不同浏览器的差异
(1) 面试题：说说开发项目的时候不同浏览器的不同点，你是怎么解决的？
Appendchild,insertcell,px。
(2) 不同浏览器中对Dom支持的方法不一样。
1) 获取网页中哪个元素触发了事件，在IE中使用srcElement;在FireFox下面使用target。
2) 使用Dom获取和更改网页标签元素内文本，在IE中使用innerText，在FireFox中使用textContent。
3) 动态为网页和元素绑定事件，在IE中绑定事件的方法是：attachEvent，在FireFox中绑定事件的方法是AddEventListener。
(3) 不同浏览器中对CSS的支持不一样，所以出现在IE中显示正常的网页，在FF下面全部乱点了，哀悼网页使用的CSS只有IE支持，FF都不支持。
(4) JQuery之类的框架进行s了封装，将不同的浏览器的差异帮开发人员处理了，开发人员只要调用Jquery方法，Jquery会帮助在不同的浏览器中进行翻译，用JQuery就可以解决不同浏览器上的Dom的不同。
JS中的正则表达式
(1) JavaScript中创建正则表达式类的方法：
1) var regex=new RegExp(”\d{5}”)或者var regex=^d{5}/
2) /表达式/是JavaScript中专门为简化正则表达式编写而提供的语法，写在//中的正则表达式就不用管转义符了。
(2) RegExp对象的方法
1) test(str)判断字符串str是否匹配正则表达式，相当于IsMatch。
var regex=/.+@.+/;
alert(regex.test(’934532778#qq.com’));
alert(regex.test(’sss.ss.com’));
2) exec(str)进行搜索匹配，返回值为匹配结果。
3) compile编译表达式，提高运行速度。
(3) string对象中提供了一些与正则表达式相关的方法，相当于对于RegExp类的包装，简化调用。
1) match(regexp),相当于调用exec。
var s=934532778@qq.com;
var regex=/(.+)@(.+)/;
s．match(regex);
alert(regexp.$1); alert(RegExp.$2); //取得第一组和第二组的值。
案例1
回车实现Tab跳转，响应文本框的onkeyDown事件，window.event.keyCode获得用户点击的keycode。(*)
keyCode和ASCII不是完全一致，主键盘的1和小键盘的1的ASCII一样，但是keyCode不一样，回车的KeyCode为13，tab的keyCode为9
| 代码如下 | 复制代码 |
|
<body onkeydown="if(window.event.keyCode==13){window.event.keyCode=9}"> <input type="text" /> <input type="text" /> <input type="text" /> <input type="text" /> </body> |
|
案例2
全额文本框:财务相关系统中涉及到金额的文本框有如下要求：
(1) 进入金额文本框下不使用中文输入法。
(2) 不能输入非数字。
(3) 焦点在文本框中的时候文本框左对齐，焦点离开文本框中的时候文本框右对齐，显示千分位。
注释：(1) 禁用输入法：style=”inne-mode:disabled”。
(2) 禁止键入非法值，只有这些才能够被键入
(3) 禁止黏贴（伟大的tester），<input onpaste=”return false;”>大暴力，应该只是禁止黏贴非法值，在onpaste中通过clipboardData.getData(‘text’)取到黏贴板中的值，然后遍历每个字符，看是否是合法的值，如果全部是合法值，才允许黏贴，只要有一个非法值就禁止黏贴。
(4) 添加千分位
| 代码如下 | 复制代码 |
|
<script type="text/javascript"> function numkeyDown() { var k = window.event.keyCode; return isValidNum(k); //判断K是否是合法的ASCII } function isValidNum(k) { return (k == 9) || (k == 13) || (k == 46) || (k == 80) || (k == 189) || (k == 109) || (k == 190) || (k == 110) || (k >= 48 && k <= 57) || (k >= 96 && k == 105) || (k >= 37 && k <= 40); } function numpaste() { var text = clipboardData.getData("text"); for (var i = 0; i < text.length; i++) { var asc = text.charCodeAt(i); //charAt——>"3",charCodeAt取ASCII码 if (!isValidNum(asc)) { //遇到一个非法值就认为要黏贴的内容是非法的。 return false; } } } </script> </head> <body> <input type="text" onpaste="return numpaste()" onkeydown="return numkeyDown" onfocus="this.style.textalige='left'" onblur="this.style.textalige='right'" style="ime-mode：disabled" /> </body> |
|