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

但是文本框在默认情况下缺少验证数据的手段,因此需要使用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)

Javascript高级编程学习笔记(77)—— 表单(5)过滤输入的更多相关文章

  1. Javascript高级编程学习笔记(75)—— 表单(3)表单字段

    表单字段 表单作为web应用中不可或缺的一部分,当然也是可以使用原生的 DOM 元素来访问的 除了标准的访问方式之外,每个表单都拥有一个 elements 属性,该属性保存着该表单所有 表单元素 的集 ...

  2. Javascript高级编程学习笔记(80)—— 表单(8)表单序列化

    表单序列化 随着 Ajax 的出现,表单序列化成为一种常见需求 以将表单信息序列化为查询字符串为例 我们可以利用表单的 type 属性,以及 name 和 value 实现对表单的序列化 序列化应满足 ...

  3. Javascript高级编程学习笔记(78)—— 表单(6)HTML约束验证API

    自动切换焦点 使用JS可以极大地提升表单的易用性 其中最常用的一种就是当用户填写完当前字段后焦点自动切换到下一个字段 以下方的HTML代码为例: <input type="text&q ...

  4. Javascript高级编程学习笔记(74)—— 表单(2)表单提交及重置

    表单提交 表单的很大一部分作用就是帮助用户完成和服务器的交互 所以表单提交是表单中比较重要的部分 虽然现如今的大部分应用场景都使用 AJAX 的异步请求来代替表单,但是仍有部分操作需要使用表单来完成, ...

  5. Javascript高级编程学习笔记(73)—— 表单(1)表单基础

    表单 JS最初的一个用途就是帮助服务器分担处理表单的责任 时至今日,虽然web应用以及JS都有了长足的发展,但是表单依然是现在web应用中比较重要的部分. 因为默认的表单控件很丑,所以有时候我们会使用 ...

  6. 《JavaScript高级程序设计》笔记:表单脚本(十四)

    表单的基础知识 在HTML中,表单是由<form>元素来表示的,而在JS中,表单对应的是HTMLFormElement类型.HTMLFormElement继承了HTMLElement,因而 ...

  7. Javascript高级编程学习笔记(83)—— 富文本选区(3)

    富文本选区 在富文本编辑器中使用 iframe 的 getSelection() 方法可以获取选中的文本 该方法是 window 对象和 document 对象的属性,调用后会返回一个当前选选择文本的 ...

  8. Javascript高级编程学习笔记(64)—— 事件(8)键盘与文本事件

    键盘与文本事件 用户在使用键盘时会触发键盘事件 “DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容 所以键盘事件被放入了DOM3级事件的规范中 总的来说有三个键盘事件: keydo ...

  9. Javascript高级编程学习笔记(58)—— 事件(2)事件处理程序

    事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...

随机推荐

  1. laravel5增删改查

    路由规则: 数据库配置: config/database.php laravel5/.env 控制器: 表单: 展示页面: 修改页面:

  2. 8.Redis内存分配

    8.Redis内存分配8.1 内存消耗8.1.1 内存使用统计8.1.2 内存消耗划分8.1.3 子进程内存消耗8.2 内存管理8.2.1 设置内存上限8.2.2 动态调整内存上限8.2.3 内存回收 ...

  3. 包管理工具-yarn

    今天知道了一个新的包管理工具叫yarn,总结如下: 如果你知道npm的使用过程,那么yarn你就觉着相见恨晚呐...... npm存在的问题: >安装的时候无法保证速度的一致性 >安全问题 ...

  4. 20170529计划---统计业务量并生成EXCEL通过邮件发送

    每个月都要统计这些业务量的东东,烦死了,赶紧通过python写一个来搞定吧,三天搞定吧,未完待续哈. 2017-5-29 19:50粗略地做了一个思维导图哈 终于第三天完成啦 #encoding=ut ...

  5. weblogic中配置数据源

    Weblogic数据源配置 一.配置数据源 1.点击数据源,进入数据源配置页面,点击新建后选择一般数据源 2.输入名称和jndi名称(两个输入一样即可)后点击下一步 3.选择驱动后点击下一步 4.输入 ...

  6. java 多线程中的wait方法的详解

    java多线程中的实现方式存在两种: 方式一:使用继承方式 例如: PersonTest extends Thread{ String name; public PersonTest(String n ...

  7. vscode+MinGW+cmake设置轻量ide

    本地随手写一些题目的时候,发现visual studio非常庞大emmm vscodevscode是一个轻量编辑器 (1)vscode插件与设置自动同步 在两个电脑上,用vscode可以同步插件 ,利 ...

  8. eval函数的特点和作用

    eval(): 作用:它的作用是把对应的字符串解析成js代码并运行(将json的字符串解析成为JSON对象): 特点:它是一个全局函数: 缺点:1>在该函数内部申明的变量都是全局变量,且申明的变 ...

  9. C# WPF 通过委托实现多窗口间的传值

    在使用WPF开发的时候就不免会遇到需要两个窗口间进行传值操作,当然多窗口间传值的方法有很多种,本文介绍的是使用委托实现多窗口间的传值. 在上代码之前呢,先简单介绍一下什么是C#中的委托(如果只想了解如 ...

  10. PNP的学习-EPNP

    EPNP主要是利用已知的3d点,通过PCA选择4个控制点,建立新的局部坐标系,从而将3d坐标用新的控制点表示出来. 然后,利用相机投影模型和2d点,转换到相机坐标系中,再在相机坐标系中建立和世界坐标系 ...