Javascript高级编程学习笔记（77）—— 表单（5）过滤输入

在日常实践中，我们常常会需要用户按照某种规则输入数据

但是文本框在默认情况下缺少验证数据的手段，因此需要使用JS来完成此类过滤输入的操作

通过事件和DOM的结合手段就能够将普通的文本框转换为功能型控件

屏蔽字符

有时候我们需要用户的输入不包含某些字符

所以我们可以通过阻止 Keypress 事件的默认事件来完成屏蔽字符的功能

以如下代码为例，可以实现一个只能输入数字的文本框

var textbox = document.getElementById("myInput");

text.addEventListener("keypress",function(event){
    if(!/\d/.test(String.fromCharCode(event.charCode))){
        event.preventDefault();// 如果不是数字则阻止默认事件，即阻止输入
    }
},false)

但是上面的代码存在一个问题，那就是常用的功能型按键也被屏蔽了，比如退格之类的（总不能让用户只能输入不能删除吧）

所以一般来说我们还需要注意这些功能型按键的检测

在 Firefox 中对应的键码为0 ，在safari中则为8

所以我们只需要放过键码小于10的键就行，如果不放心的话可以在提交表单之前通过正则对其再次进行校验

所以重写后的代码如下

var textbox = document.getElementById("myInput");

text.addEventListener("keypress",function(event){
    var charCode = event.charCode;
    if(!/\d/.test(String.fromCharCode(charCode))&&charCode>9){
        event.preventDefault();// 如果不是数字则阻止默认事件，即阻止输入
    }
},false)

但是这样的代码仍存在一个小问题，那就是粘贴复制也在屏蔽的范围之内

所以我们还需要保证用户没有按下 ctrl 键

var textbox = document.getElementById("myInput");

text.addEventListener("keypress",function(event){
    var charCode = event.charCode;
    if(!/\d/.test(String.fromCharCode(charCode))&&charCode>9&&!event.ctrlKey){
        event.preventDefault();// 如果不是数字则阻止默认事件，即阻止输入
    }
},false)

操作剪切板

HTML5将剪切板的相关事件纳入了标准，即以下6个剪切板事件：

1. beforecopy：在发生复制操作前触发
2. copy：在复制发生时触发
3. beforecut：在剪切操作前触发
4. cut：发生剪切操作时触发
5. beforepaste：在发生粘贴操作前触发
6. paste：发生粘贴操作时触发

由于没有针对剪切板事件的标准，所以上面事件的事件对象会因浏览器而异

如果要阻止粘贴复制，则只有取消 paste、copy、cut 事件的默认事件才能生效

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

该对象是 window 对象的属性

但是在主流浏览器中只有剪切板事件发生时才可以对该对象进行访问，这是为了避免对剪切板数据的未授权访问

该对象有以下三个方法：

1. getData（）：用于从剪切板中取得数据，接收一个参数表示要获取数据的类型："text"、"URL"
2. setData（）：该方法用于设置剪切板中的内容，接收两个参数，第一个参数和 getData 一样，第二个参数则是需要放在剪切板中的文本
3. clearData（）：清空剪切板

要实现一个只接收数字的输入框当然还需要对剪切板事件进行处理，不然仍可以通过粘贴的方式在文本框中输入数字

实现如下：

textbox,addEventListener("paste",function(event){
    var clipboard = widnow.clipboardData || event.clipboardData;
    var text = clipboard.getData("text");

    if(!/^\d*$/.test(text)){
        event.preventDefault();
    }
},false)