首页 > 其他分享 >vue contenteditable处理火狐浏览器复制带标签问题

vue contenteditable处理火狐浏览器复制带标签问题

时间:2023-05-16 11:55:06浏览次数:44  
标签:vue contenteditable document text window 火狐 clipboardData getData event

this.$refs.materialTxt.addEventListener('paste', function(e) {
        console.log('监听到了')
        e.stopPropagation()
        e.preventDefault()
        let text = ''; const event = (e.originalEvent || e)
        if (event.clipboardData && event.clipboardData.getData) {
        text = event.clipboardData.getData('text/plain')
        } else if (window.clipboardData && window.clipboardData.getData) {
        text = window.clipboardData.getData('Text')
        }
        if (document.queryCommandSupported('insertText')) {
          document.execCommand('insertText', false, text)
        } else {
          document.execCommand('paste', false, text)
          }
        })

 

标签:vue,contenteditable,document,text,window,火狐,clipboardData,getData,event
From: https://www.cnblogs.com/zerofan/p/17404507.html

相关文章

  • Vue.js(九) 第三方常用插件
    1.Vue.jsdevtools用于开发调试Vue.js的一个必备插件。可以在Chrome中的扩展程序中直接安装,也可以本地文件的方式安装。2.nprogress页面顶部进度条当路由切换事会在浏览器的顶部出现一个蓝色进度条用于表示路由切换的进度,并在又上角有个蓝色loading的动画。一般情况下切换到目标......
  • Vue.js(十) element-ui PC端组件库
    一:简介饿了么公司基于Vue开发了两套UI组件库,PC端组件库和移动端组件库。一部分组件库是对原生的HTML标签元素的封装,增加了一些新的功能。另一部分组件库是原生HTML标签元素没有的,是一些比较常用的独立的功能(如:分页、进度条、加载中、树形控件等),将这些独立的常用的功能封装成......
  • element-plus + VUE3 项目 build 之后 el-cascader无法选中而且导致整个网页卡顿
    cascader不能用v-model接收值,需要改为model-value方式<el-cascadermodel-value="selRegion":options="RegionTreeCascader":show-all-levels="true"separator="-":props="{checkStrictly:true,expandTrigger:'hove......
  • vue报错EISDIR: illegal operation on a directory, read解决
    报错:EISDIR:illegaloperationonadirectory,readInternalservererror:EISDIR:illegaloperationonadirectory,read原因:引入子组件时,子组件是xxx/文件夹名/index.vue,引入只写到了xxx/文件夹名解决:引入子组件时,路径写到xxx/文件夹名/index.vue......
  • Vue入门浅析
    title:vue入门浅析author:Sun-Winddate:May14,2022写这篇博文的目的在于为初学vue的同学对vue有一些更进一步的了解读这篇博文前,您应该至少安装了vue环境,能在本地运行一个简单的demo本文将浅析vue项目工程的结构,以及用npm运行项目的过程中发生的一些事件注明:该文本应在......
  • 基于.Net5+Vue+iView前后端分离通用权限开源系统
    在Github上,.Net通用的权限框架非常多,功能也都比较强大,但是对于很多初学者来说,想要从零学习框架的搭建,就比较困难了。所以,今天给大家推荐一套比较简单的前后端分离通用权限系统。项目简介这是一个基于.Net5+Vue+iView开发的、前后端分离通用权限系统,系统采用三层架构,该项目功能......
  • vue 传参数据丢失或者“[object Object]”
    路由传参3种方式1、地址后面直接带参数2、params传参(相当于post,不会显示在url里面)3、query传参(相当于get,会显示在url里面)当params传参刷新页面的时候,页面容易丢失数据,使用query传参可以避免丢失数据当参数是object时的复杂参数时,接收参数容易变成“[objectObject]”解决办......
  • vuex 使用 vuex-persistedstate 数据持久化
    1、安装npmivuex-persistedstateyarnaddvuex-persistedstate2、在store.js中引入importcreatePersistedStatefrom"vuex-persistedstate"举例:importVuefrom'vue'importVuexfrom'vuex'importcreatePersistedStatefrom"v......
  • 在vue中使用类似于dateadd函数的功能
    1.项目加入moment组件yarnaddmoment2.引入组件importmomentfrom'moment'//引入moment组件3.例子:指定时间增加1小时代码constt='10:10'constt2=moment(t,'HH:mm').add(1,'h').format('HH:mm')console.log(t2)输出:11:......
  • vue3+ swiper8
    swiper是一个非常好用的图片切换组件,但是vue3+swiper8版本的文档看上去会有点懵逼(一部分是因为版本太多了,一部分是因为很少用)此处记录下我的使用方法:安装:npmiswiper按照官网来使用:html部分:(基本上常用的也就这些啦,在复杂的就真的要去啃书啦)<swiper//在swiper......