JS禁止用户对页面文档进行操作

常用方法如下:

禁止鼠标右键:οncοntextmenu="return false";

禁止选择:onselectstart="return false";

禁止拖放:οndragstart="return false";

禁止拷贝:οncοpy=document.selection.empty() 。

禁止复制:oncopy = "return false";

禁止保存:<noscript><iframe src="*.htm"></iframe></noscript>,放在head里面。

禁止粘贴:<input type=text οnpaste="return false">

禁止剪贴:oncut = "return false";

关闭输入法:<input style="ime-mode:disabled">

解析:

onselect 与 onselectstart 都属于 JavaScript 当中的 DOM 事件,由于它们二者的拼写比较相似,所以最初使用时弄混了两个事件的效果,在此做一个简单的记录。

背景

之前在公司的前端项目中,自己写了一个基于 jquery 的分页器,在测试的时候发现了一个问题:当鼠标连续快速点击【下一页】按钮的时候,会将按钮上的文字选中,变成蓝色,体验不是很好。因为当时知道有一个事件是可以控制元素文字是否允许被选中的,但是忘记了怎么用的,于是上网搜索了一番。第一次错将 onselect 事件当成了实现这个效果的事件,试过之后发现不管用,继续研究发现其实应该是用 onselectstart 事件来进行控制。

二者的区别

  • onselect 事件会在文本框中的文本被选中时发生

  • 支持该事件的 HTML 标签:<input type="text"><textarea>

  • 支持该事件的 JavaScript 对象:window

  • 使用举例:

<input type="text" value="Hello world!" onselect="alert('你已经选中了文字!')" />

即当鼠标的左键划过并选中了 input 输入框中的内容时,就会触发 onselect 事件。

  • onselectstart 触发时间为目标对象被开始选中时(即选中动作刚开始,尚未实质性被选中)

  • onselectstart 几乎可以用于所有对象

  • 注意:onselectstart 事件不被 input 和 textarea 标签支持

  • 使用举例(非 Firefox 浏览器下):

<div onselectstart="return false;">我不能被鼠标选中哦</div>
  • Firefox 不支持上面这样的使用方式,在 Firefox 浏览器下可以通过设置 CSS 样式来达到相同的效果

div { -moz-user-select: none; }

即 onselectstart 事件才是用来实现元素内文本不被选中的正确方法。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值