当前位置:首页 > java知识学习_java技术文章 > 正文

js中onbeforepaste事件的介绍与应用

浏览250+

一、事件介绍

该onbeforepaste事件是JS脚本代码中用来做些各种验证事件的一其中一个表单提交验证事件,常配合Form表单中的input标签文本框联合使用。

该事件应用场景一般是我们在做表单提交之前要做一些用户输入内容的验证操作,通常会限制用户对文本框的输入内容做合法验证,比如说用户只能输入字母,或者是只能输入汉字。

一般的的常规正则验证可以判断用户的输入内容是否符合规则,但是有时候用户喜欢复制粘贴,一般的事件就没法针对粘贴的内容进行判断,而该onbeforepaste事件的推出刚好是对用户粘贴的内容做验证相关操作,避免用户粘贴了一些不合法的字符或者是特殊的字符。

二、onbeforepaste详解与应用

1)事件概念

onbeforepaste根据英文翻译过来的意思就是在黏贴之前触发某个事件,实际的意思就是说当用户复制了一段内容想要黏贴到文本框,再黏贴的一瞬间就会触发了这个事件,这个事件此时就会对用户黏贴到input文本框的内容做验证和判断

2)事件应用

onbeforepaste事件代码

上面这段form表单文本本框中的代码就是对该事件最好的应用,该段代码实际的意思就是用户黏贴到文本框的时候触发了该事件。

然后onbeforepaste事件获取到文本框的内容,应用正则表达式替换掉不是中文汉字的字符,最后将替换后处理好的内容重新显示在input文本框中。

上图代码中的.getData方法是拿到input框中用户输入的原始内容,.replace方法是按照正则规则替换文本内容,.setdata方法是将替换后的内容重新设置到文本框。

3)onbeforepaste事件配合onkeyup事件共同应用

配合onkeyup事件的案例代码

上面的代码是该事件与onkeyup事件做的一个联合使用,这也是实际项目中工作中最常用的一段代码,刚好拿过来举例最好不过了。

首先我们先介绍一下onkeyup事件的意思,该事件是用户按下键盘上的任何一个键然后松开时会触发的事件,下面我们解释一下上面这段代码的意思。

该段代码既照顾到用户复制黏贴是对文本内容的判断校验又照顾到了用户使用键盘输入内容的时候做相关的校验,实际上就是不管用户是复制粘贴还是用键盘打字,都会对该段文本内容校验其英文字符将英文字符给替换掉。

4)onbeforepaste禁止文本框复制黏贴代码案例

表单代码如下:

  1. <body >
  2. <form name=“form1” method=“post”>
  3. <input type=“text” name=“field” onbeforepaste=“return clearup()” />
  4. </form>
  5. </body>

触发事件的js代码如下:

  1. <script type=“text/javascript”>
  2. function clearup(){
  3. window.clipboardData.setData(“text”,“”); //清空
  4. }
  5. </script>

上面的代码就是禁止用户向文本框中做复制黏贴的操作案例,其实实现思想相当的简单,就是当用户复制内容黏贴到文本框儿的那一刹那触发onbeforepaste这个事件,该事件调用一段js代码,调用.setData方法文本框的内容清空,然后这样就轻而易举地完成了禁止用户做黏贴版的操作。

以上就是该事件的详解与应用场景和常见的案例介绍,相信大家在实际工作中当碰到该事件的时候一定能想到本文所讲的这几个案例,希望能够帮助大家更好的应用在工作和学习生活中去。

 

相关文章推荐

js-onbeforepaste详解

高手这行什么意思:onbeforepaste=”clipboardData.setData(‘text’,.replace(/[^\d]/g,”)

onbeforepaste和onkeyup是什么事件,帮我看一个正则表达式

onbeforepaste事件用法

onbeforepaste?clipboarddata?onbeforepaste jquery?js常用正则表达式

document的事件onbeforepaste怎么使用