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实现页面内容禁止选中功能,仅输入框和文本域可选就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue限制输入框只能输入8位整数和2位小数的代码

    看到这个标题好像很简单,onblur.onchange事件都能做到,但是用户体验感貌似很差.查了下百度查不到资料了.看了下vue的基础,发现 vue 有个 watch 监听器好吧,从这里入手 用v-model 加watch 就可以很简单的实现这一个功能. ----代码省略 <input id="amt" type="number" v-model="amount"/> ----代码省略 data:{ return{ amount:&q

  • VUE.js实现动态设置输入框disabled属性

    需求背景 页面从list列表展示,跳转到新增和修改的时候,新增和修改用的是同一个页面:add-or-update.vue. 修改的时候用户的账号不能修改,因此需要将账号的输入框属性设置为"只读". 代码样例 <el-input v-model="dataForm.account" placeholder="账号" v-bind:disabled="dataForm.id!=0"></el-input>

  • vue实现Input输入框模糊查询方法

    本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码,供大家参考,具体内容如下 原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item,则返回 item 的第一次出现的位置.开始位置的索引为 0. 如果在数组中没找到指定元素则返回 -1. 下面先看示例: 搜索前: 搜索后: 实现方法: methods:{ // 点击搜索工程 search

  • vue遍历生成的输入框 绑定及修改值示例

    对于vue遍历生成的输入框进行其值的修改与保存是vue项目开发过程中的一种常规操作.这种操作的难点在于生成数量的不确定,不能在在组件中的data直接定义. 思路 获取生成的输入框数量 初始化数组,数组的长度与待绑定输入框数量一致 将每一个输入框的v-model与数组特定项进行绑定 实现代码 1.data中定义一个存放model值的空数组 data() { return { inputData :[] } } 2.将获取到的数组遍历,将获取到的值插入空数组 res.data.rows.map(v.

  • vue把输入框的内容添加到页面的实例讲解

    vue最最最简单的demo(记得引入) 实例化一个vue,绑定#app的元素,要渲染的数组arr作为data. 把arr的item渲染到页面,输入内容点击按钮把用户输入的内容添加到页面以及数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <

  • 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-se

  • JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    本文实例讲述了JavaScript实现点击单选按钮改变输入框中文本域内容的方法.分享给大家供大家参考.具体如下: 这里实现点击单选按钮改变输入框中文本域内容的方法,是一个JavaScript 的简单应用,可以减少用户的输入,提升用户操作易用性,它类似一个TAB选项卡一样的功能,并可以完成后提交表单,值得学习. 运行效果截图如下: 具体代码如下: <html> <head> <title>JavaScript点击单选框改变输入框内容</title> </

  • VUE 实现复制内容到剪贴板的两种方法

    VUE 复制内容至剪切板(两种使用方法) 复制内容至剪切板使用的是插件'vue-clipboard2',通过官方文档会发现共有两种使用方式. 第一种方式与大多数文章类似,只粘贴代码: <template> <div class="container"> <input type="text" v-model="message"> <button type="button" v-clipb

  • antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作

    废话不说,上代码! <a-menu theme="dark" mode="inline" :selectedKeys="[$route.path]"> <a-menu-item :key="'/home'"> <router-link to="home"> <a-icon type="user" /> <span>nav 1&l

  • vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)

    html代码: <section class="container page-home"> <div id="main-content" class="wrap-container zerogrid"> <article id="news_content" v-for="item in items"> <div class="col-1-2 right&q

  • Vue实现页面添加水印功能

    创建watermark.js文件 let watermark = {} let setWatermark = (str) => { let id = '1.23452384164.123412416'; if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)); } //创建一个画布 let can = document.createElement('can

  • Vue中点击active并第一个默认选中功能的实现

    Vue中点击active并第一个默认选中功能的实现

    在jQuery中: 就是让第一个选中,其他的不选中! 当点击后当前选中,其他不选中. 有一种绕口令:东边的喇嘛买了西边的喇叭 o((⊙﹏⊙))o 在Vue中快速创建与选中 1.遍历出来, 在click中赋值 遍历出来的mx. 2.class进行决定是否显示,一点击就把对应的mx赋到activeName中 3.此时activeName就和mx一模一样的文本,然后返回一个true能显示当前的了 4.把最后一个瑕疵补上, 让第一个默认选中.就是把activeName放一个数值就行了 <template

  • Vue项目页面跳转时浏览器窗口上方显示进度条功能

    在vue项目中,为了减少首屏加载的时间,通常会开启路由的懒加载.路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间. 然而,路由懒加载会使得我们在第一次打开一个新页面的时候,会有一个加载时间.如果在这个时候我们没有一个提示的话,给人的感觉会是好像我点了页面跳转但是没反应.所以,这个时候我们可以加一个进度条来告知用户. 具体实现,我们使用NProgress这个滚动条效果插件. 1.安装: cnpm install --save nprogress 2.在main.js中引入: impor

  • vue实现页面div盒子拖拽排序功能

    vue实现页面div盒子拖拽排序功能

    vue 实现页面div盒子拖拽排序功能前言:目前市面上有很多实现拖拽排序功能的插件和方法,本节不过多累述,只讲一种:css3的transition-group方法 效果图: 1. DOM中使用: <transition-group class="container" name="sort"> <div class="app-item" v-for="app in customApps" :key="

  • vue实现页面缓存功能

    本文实例为大家分享了vue实现页面缓存功能的具体代码,供大家参考,具体内容如下 主要利用keep-alive实现从列表页跳转到详情页,然后点击返回时,页面缓存不用重新请求资源. 一.在router里配置路由 在meta里定义页面是否需要缓存 import Vue from "vue"; import Router from "vue-router"; // 避免到当前位置的冗余导航 const originalPush = Router.prototype.push

随机推荐