十年专注于品牌网站建设 十年专注于品牌网站建设,低调、高逼格、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

屏蔽字符和对来自剪贴板上内容在文本框过滤操作方法

百恒网络 2017-02-06 294

我们经常会要求用户在文本框中输入特定的数据,或者输入特定格式的数据。例如,必须包含某些 字符,或者必须匹配某种模式。由于文本框在默认情况下没有提供多少验证数据的手段,因此必须使用 JavaScript来完成此类过滤输入的操作。而综合运用事件和 DOM手段,就可以将普通的文本框转换成能 够理解用户输入数据的功能型控件。

1. 屏蔽字符

有时候,我们需要用户输入的文本中包含或不包含某些字符。例如,电话号码中不能包含非数值字 符。如前所述,响应向文本框中插入字符操作的是 keypress 事件。因此,可以通过阻止这个事件的默 认行为来屏蔽此类字符。在极端的情况下,可以通过下列代码屏蔽所有按键操作。

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

event = EventUtil.getEvent(event);

EventUtil.preventDefault(event);

});

运行以上代码后,由于所有按键操作都将被屏蔽,结果会导致文本框变成只读的。如果只想屏蔽特 定的字符,则需要检测 keypress 事件对应的字符编码,然后再决定如何响应。例如,下列代码只允许 用户输入数值。

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))){

EventUtil.preventDefault(event); }

});

在这个例子中,我们使用 EventUtil.getCharCode()实现了跨浏览器取得字符编码。然后,使 用 String.fromCharCode()将字符编码转换成字符串,再使用正则表达式 /d/ 来测试该字符串,从 而确定用户输入的是不是数值。如果测试失败,那么就使用 EventUtil.preventDefault()屏蔽按键 事件。结果,文本框就会忽略所有输入的非数值。

虽然理论上只应该在用户按下字符键时才触发 keypress 事件,南昌网站建设公司百恒网络前端工程师提醒大家,但有些浏览器也会对其他键触发此 事件。Firefox 和 Safari(3.1 版本以前)会对向上键、向下键、退格键和删除键触发 keypress 事件; Safari 3.1及更新版本则不会对这些键触发 keypress 事件。这意味着,仅考虑到屏蔽不是数值的字符还 不够,还要避免屏蔽这些极为常用和必要的键。所幸的是,要检测这些键并不困难。在 Firefox 中,所 有由非字符键触发的 keypress 事件对应的字符编码为 0,而在 Safari 3以前的版本中,对应的字符编 码全部为 8。为了让代码更通用,只要不屏蔽那些字符编码小于 10的键即可。故而,可以将上面的函数 重写成如下所示。

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){

EventUtil.preventDefault(event);

} });

这样,我们的事件处理程序就可以适用所有浏览器了,即可以屏蔽非数值字符,但不屏蔽那些也会 触发 keypress 事件的基本按键。

除此之外,还有一个问题需要处理:复制、粘贴及其他操作还要用到 Ctrl 键。在除 IE 之外的所有 浏览器中,前面的代码也会屏蔽 Ctrl+C、Ctrl+V,以及其他使用 Ctrl的组合键。因此,后还要添加一 个检测条件,以确保用户没有按下 Ctrl键,如下面的例子所示。

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); }

});

经过后一点修改,就可以确保文本框的行为完全正常了。在这个例子的基础上加以修改和调整, 就可以将同样的技术运用于放过和屏蔽任何输入文本框的字符。

2. 操作剪贴板

IE是第一个支持与剪贴板相关事件,以及通过 JavaScript访问剪贴板数据的浏览器。IE的实现成为 了事实上的标准,不仅 Safari 2、Chrome和 Firefox 3也都支持类似的事件和剪贴板访问(Opera不支持通过 JavaScript访问剪贴板),HTML 5后来也把剪贴板事件纳入了规范。下列就是 6个剪贴板事件。

beforecopy:在发生复制操作前触发。

copy:在发生复制操作时触发。

beforecut:在发生剪切操作前触发。

cut:在发生剪切操作时触发。

beforepaste:在发生粘贴操作前触发。

paste:在发生粘贴操作时触发。

由于没有针对剪贴板操作的标准,这些事件及相关对象会因浏览器而异。在 Safari、Chrome和 Firefox 中,beforecopy、beforecut 和 beforepaste 事件只会在显示针对文本框的上下文菜单(预期将发 生剪贴板事件)的情况下触发。但是,IE则会在触发 copy、cut 和 paste 事件之前先行触发这些事件。 至于 copy、cut 和 paste 事件,只要是在上下文菜单中选择了相应选项,或者使用了相应的键盘组合 键,所有浏览器都会触发它们。

在实际的事件发生之前,通过 beforecopy、beforecut 和 beforepaste 事件可以在向剪贴板发 送数据,或者从剪贴板取得数据之前修改数据。不过,取消这些事件并不会取消对剪贴板的操作——只 有取消 copy、cut 和 paste 事件,才能阻止相应操作发生。

要访问剪贴板中的数据,可以使用 clipboardData 对象:在 IE中,这个对象是 window 对象的 属性;而在 Firefox 4+、Safari和 Chrome中,这个对象是相应 event 对象的属性。但是,在 Firefox、 Safari和 Chorme中,只有在处理剪贴板事件期间 clipboardData 对象才有效,这是为了防止对剪贴板 的未授权访问;在 IE 中,则可以随时访问 clipboardData 对象。为了确保跨浏览器兼容性,好只 在发生剪贴板事件期间使用这个对象。

这个 clipboardData 对象有三个方法:getData()、setData()和 clearData()。其中,getData() 用于从剪贴板中取得数据,它接受一个参数,即要取得的数据的格式。在 IE中,有两种数据格式:"text" 和"URL"。在 Firefox、Safari 和 Chrome 中,这个参数是一种 MIME 类型;不过,可以用"text"代表 "text/plain"。

类似地,setData()方法的第一个参数也是数据类型,第二个参数是要放在剪贴板中的文本。对于 第一个参数,IE 照样支持"text"和"URL",而 Safari 和 Chrome 仍然只支持 MIME 类型。但是,与 getData()方法不同的是,Safari和 Chrome的 setData()方法不能识别"text"类型。这两个浏览器在 成功将文本放到剪贴板中后,都会返回 true;否则,返回 false。为了弥合这些差异,我们可以向 EventUtil 中再添加下列方法。

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);

} },

//省略的代码

};

这里的 getClipboardText()方法相对简单;它只要确定 clipboardData 对象的位置,然后再 以"text"类型调用 getData()方法即可。相应地,setClipboardText()方法则要稍微复杂一些。在 取得clipboardData 对象之后,需要根据不同的浏览器实现为setData()传入不同的类型(对于Safari 和 Chrome,是"text/plain";对于 IE,是"text")。

在需要确保粘贴到文本框中的文本中包含某些字符,或者符合某种格式要求时,能够访问剪贴板是非 常有用的。例如,如果一个文本框只接受数值,那么就必须检测粘贴过来的值,以确保有效。在 paste 事件中,可以确定剪贴板中的值是否有效,如果无效,就可以像下面示例中那样,取消默认的行为。

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

event = EventUtil.getEvent(event);

var text = EventUtil.getClipboardText(event);

if (!/^d*$/.test(text)){

EventUtil.preventDefault(event); }

});

在这里,onpaste 事件处理程序可以确保只有数值才会被粘贴到文本框中。如果剪贴板的值与正 则表达式不匹配,则会取消粘贴操作。Firefox、Safari和 Chrome只允许在 onpaste 事件处理程序中访 问 getData()方法。

由于并非所有浏览器都支持访问剪贴板,所以更简单的做法是屏蔽一或多个剪贴板操作。在支持 copy、cut 和 paste 事件的浏览器中(IE、Safari、Chrome和 Firefox 3及更高版本),很容易阻止这些 事件的默认行为。在 Opera中,则需要阻止那些会触发这些事件的按键操作,同时还要阻止在文本框中 显示上下文菜单。

本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌APP开发公司-百恒网络 http://www.jxbh.cn/ 如转载请注明出处!


400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×