vue实现页面内容禁止选中功能,仅输入框和文本域可选

 更新时间:2019年11月09日 16:09:55   作者:时光如瑾  
今天小编就为大家分享一篇vue实现页面内容禁止选中功能,仅输入框和文本域可选,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

上网上翻了翻,共找到两种方式

CSS样式控制,只需将下面代码复制到 vue应用下,index.html文件中的body标签上

*{ 
 -webkit-touch-callout:none; /*系统默认菜单被禁用*/ 
 -webkit-user-select:none; /*webkit浏览器*/ 
 -khtml-user-select:none; /*早期浏览器*/ 
 -moz-user-select:none;/*火狐*/ 
 -ms-user-select:none; /*IE10*/ 
 user-select:none; 
} 
input{ 
 -webkit-user-select:auto; /*webkit浏览器*/  
}
textarea{
 -webkit-user-select:auto; /*webkit浏览器*/
}

js控制方式,需要重写onselectstart(),onselect。(将下面代码复制到body标签上即可,注意此种写法输入框和文本域也不可选)

onselectstart='return false'
onselect='return false'
oncontextmenu='return false' #此句禁用鼠标右键

以上这篇vue实现页面内容禁止选中功能,仅输入框和文本域可选就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现按钮文字动态改变

    vue实现按钮文字动态改变

    这篇文章主要介绍了vue实现按钮文字动态改变方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue+axios methods方法return取不到值问题及解决

    vue+axios methods方法return取不到值问题及解决

    这篇文章主要介绍了vue+axios methods方法return取不到值问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue中Quill富文本编辑器的使用教程

    Vue中Quill富文本编辑器的使用教程

    这篇文章主要介绍了Vue中Quill富文本编辑器的使用教程,包括自定义工具栏、自定义字体选项、图片拖拽上传、图片改变大小等使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • @error函数vue图片加载失败空白页解决方案

    @error函数vue图片加载失败空白页解决方案

    这篇文章主要介绍了@error函数vue图片加载失败空白页解决方案,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • vue中内网/局域网/离线的情况下使用及建立项目方式

    vue中内网/局域网/离线的情况下使用及建立项目方式

    这篇文章主要介绍了vue中内网/局域网/离线的情况下使用及建立项目方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能

    移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能

    这篇文章主要介绍了移动端 Vue+Vant 的Uploader 实现 上传、压缩、旋转图片功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-06-06
  • vue滚动固定顶部及修改样式的实例代码

    vue滚动固定顶部及修改样式的实例代码

    这篇文章主要介绍了vue滚动固定顶部及修改样式,本文给大家提到了滚动固定位置有多种方法,感兴趣的朋友跟随小编一起看看吧
    2019-05-05
  • vue+springboot用户注销功能实现代码

    vue+springboot用户注销功能实现代码

    这篇文章主要介绍了vue+springboot用户注销功能,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-05-05
  • vue-cli3中vue.config.js配置教程详解

    vue-cli3中vue.config.js配置教程详解

    这篇文章主要介绍了vue-cli3中vue.config.js配置教程,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 使用Vue生成动态表单

    使用Vue生成动态表单

    这篇文章主要介绍了Vue生成动态表单功能,这是小编第一次接这个需求,作为前端开发的我真的不知如何下手,今天小编通过一段代码给大家分享vue生成动态表单效果,需要的朋友可以参考下
    2019-11-11

最新评论