JavaScript高级程序设计54.pdf

过滤输入

对于一些浏览器，可以使用正则表达式里的text()测试用户按下的按键，Firefox和safari（3.1版本之前）会对向上向下、退格键和删除键触发keypress事件，在Firefox中，所有非字符键触发的keypress事件对应的字符编码为0，而在Safari3之前的版本，对应的字符编码全部为8，最后确保用户没有按下Ctrl键（不屏蔽ctrl+c、ctrl+v）

EventUtil.addHandler(textbox,"keypress",function(event){

　　　　　　event=EventUtil.getEvent(event);

　　　　　　var target=EventUtil.getTarget(event);

　　　　　　var charCode=EventUtil.getCharCode(event);

　　　　　　if(!/\d/.test(string.fromCharCode(charCode))&&charCode>9&&!event.ctrlKey){

　　　　　　　　　　EventUtil.preventDefault(event);

　　　　　　　　}

　　　　});

操作剪贴板(Opera不支持通过Javascript访问剪贴板)

HTML5把剪贴板事件纳入了规范，6个剪贴板事件

beforecopy：复制操作前触发

copy：复制操作时触发

beforecut：剪切操作前触发

cut：剪切操作时触发

beforepaste：粘贴操作前触发

paste：粘贴操作时触发

由于没有针对剪贴板操作的标准，事件相关对象因浏览器而异，Safari、Chrome和Firefox中，beforecopy、beforecut和beforepaste在显示针对文本框的上下文菜单情况下触发，IE则是在copy、cut和paste操作前触发；copy、cut和paste所有浏览器都会触发他们

要访问剪贴板中的数据，可以使用clipboardData对象：

在IE中，这个对象是window对象的属性，随时可以访问

在Firefox4+、Safari和Chrome中，这个对象是相应event对象的属性，只有在处理剪贴板事件期间clipboardData对象才有效，防止对剪贴板的未授权访问

clipboardData对象有3个方法getData()、setData()和clearData()

getData()从剪贴板取得数据，接收一个数据格式的参数（IE中是text或URL，其它浏览器是MIME类型）

setData()第一个参数是数据类型（同上），第二个参数是要放在剪贴板的文本，成功操作返回true否则false

var EventUtil={

　　//省略的代码　　

　　getClipboardText：function(event){

　　　　　　var clipboardData=(event.clipboardData||window.clipboardData);

　　　　　　return clipboardData.getData("text");

　　　　},

　　setclipboardText:function(event,value){

　　　　　　if(event.clipboardData){

　　　　　　return event.clipboardData.setData("text/plain",value);

　　　　　　}else if(window.clipboardData){

　　　　　　return window.clipboardData.setData("text",value);

　　　　　　}

　　　　},

　　//省略的代码

};

HTML5约束验证API

HTML5增加验证规范，不需要JavaScript可以完成基本验证

必填字段

required属性

<input type="text" name="username" required>，适用于<input>、<textarea>和<select>字段（Opera11及之前版本不支持<select>的required属性）

检查浏览器是否支持required属性

var isRequiredSupported="required" in document.createElement("input");

其他输入类型

增加了type类型“email”和“url”（在不支持的浏览器中会自动更改为“text”）

数值范围

除了“email”和“url”，HTML还定义了几种基于数字的值：“number”、“range”、“datetime”、“datetime-local”、“date”、“month”、“week”和“time”，浏览器对这些支持并不好，对于所有的输入数值类型的元素，可以指定min属性（最小可能值）、max属性（最大可能值）和step属性（步长）

<--!输入0到100并且是5的倍数-->

<input type="number" min="0" max="100" step="5" name="count">

stepUp()和stepDown()接收一个参数，在当前数值的基础上加上或减去参数，默认为1

input.stepUp();　　//加1

input.stepDown(10);　　//减10