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关于Element UI中的文本域换行问题
这篇文章主要介绍了Vue关于Element UI中的文本域换行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue和react中关于插槽详解
这篇文章主要介绍了vue和react中关于插槽详解，slot插槽是Vue对组件嵌套这种扩展机制的称谓，在react可以也这样称呼，但是并不很常见。不过叫slot确实很形象
2022-08-08
vue和H5 draggable实现拖拽并替换效果
这篇文章主要为大家详细介绍了vue和H5 draggable实现拖拽并替换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-07-07
Vue electron零基础使用教程
Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Vue和React中快速使用Electron的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-10-10
Vue如何使用Element-ui表单发送数据与多张图片到后端详解
在做项目的时候遇到一个问题,前端需要上传表单到后端,表单数据包括文本内容和图片,这篇文章主要给大家介绍了关于Vue如何使用Element-ui表单发送数据与多张图片到后端的相关资料,需要的朋友可以参考下
2022-04-04
webpack + vue 打包生成公共配置文件（域名）方便动态修改
这篇文章主要介绍了webpack + vue 打包生成公共配置文件（域名）方便动态修改,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-08-08
快速搭建vue2.0+boostrap项目的方法
这篇文章主要介绍了快速搭建vue2.0+boostrap项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
Vue 子组件使用 this.$parent 无法访问到父组件数据和方法(解决思路)
这篇文章主要介绍了Vue 子组件使用 this.$parent 无法访问到父组件数据和方法，解决思路也很简单，本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
2023-07-07
Vue.js组件使用开发实例教程
Vue.js的组件可以理解为预先定义好了行为的ViewModel类。这篇文章主要介绍了Vue.js组件使用开发实例教程的相关资料,需要的朋友可以参考下
2016-11-11
vue+element实现页面顶部tag思路详解
这篇文章主要介绍了vue+element实现页面顶部tag效果,页面显示由数组循环得出，数组可存储在store里，tags数组里面已经有值，由于默认是白色，所以页面上看不出，接下来就是给选中的标签高亮，需要的朋友可以参考下
2021-12-12