• 欢迎访问本网站,技术教程,资源分享,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入东蓬莱!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏东部蓬莱吧

常用页面几个禁止方法事件

前端开发 Jokul 1年前 (2020-08-03) 350次浏览 0个评论 扫描二维码

问题

当我们在页面设计时,如果让用户禁止复制、禁止粘贴等操作,该如何操作呢?

方案

给需要效果的当前元素的父级元素加上禁止操作的方法事件即可

<input type="text" value="nopaste" onpaste="return false"></input>
  • 禁止拖放
  • 使用场景:禁止鼠标在网页上拖动

    ondragstart="return false"
    
  • 禁止拷贝
  • 使用场景:很多网站上的页面内容是不允许复制的,这样可以防止用户或者程序恶意的去抓取页面数据。

    oncopy="return false"
    
  • 禁止粘贴
  • 使用场景:网银转账时,输入对方卡号,需要输入两次,通常第二次输入的输入框是不允许粘贴的,这样就在一定程度上保证了卡号的准确性。

    onpaste="return false"
    
  • 禁止剪贴
  • oncut = "return false"
    
  • 禁止鼠标右键
  • 使用场景:页面加载后,防止通过右键点击形式查看源代码

    oncontextmenu="return false"
    
  • 禁止保存
  • <noscript><iframe src="*.htm"></iframe></noscript> //放在head里面 
    
  • 禁止选择判定
  • 触发时间为目标对象被开始选中时(即选中动作刚开始,尚未实质性被选中)
    基本上都能支持,但不被 input 和 textarea 标签支持
    注意:如果想在火狐中禁用的话可以使用样式控制 div { -moz-user-select: none; }

    onselectstart="return false"
    
  • 禁止选择
  • 文本框中的文本被选中时发生
    被 input 和 textarea 标签支持
    使用场景:实现元素内文本不被选中

    onselect="return false"
    

    东部蓬莱 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
    转载请注明原文链接:常用页面几个禁止方法事件
    喜欢 (1)
    [支付宝]
    分享 (0)
    发表我的评论
    取消评论
    表情 贴图 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址