div可编辑框,去除粘贴文字样式😄
上个月做了个聊天的需求(网页版的)。说到聊天都想到输入框,说到输入框都会想到input,但是input标签是不支持插入图片的(包括areatext标签)。查阅了一些资料就看到div标签有一个属性contenteditable,这个属性设置为true的话,div会变成可编辑状态,非常神奇,而且是可以插入图片的。
之所以写这篇文章当然不是只为了说这个简单的事情啦。因为开发的时候会遇到一个事情,就是复制别的地方的带样式的文字的时候,粘贴到div里,特么会把样式带上,可把我烦死了。各种查阅资料怎么去除样式,但是恕我直言,大部分人的文章都解决不了我的问题。我也有想过要么自己去获取粘贴的内容进行过滤,但是。。。。不现实啊,层级嵌套的深一些的dom就很难很难很难。
柳暗花明又一村,看了w3c的草案,才知道contenteditable这个属性可不止 true or false。
contenteditable=""
contenteditable="events"
contenteditable="caret"
contenteditable="plaintext-only"
contenteditable="true"
contenteditable="false"
大概有这些,其他的我不知道,但是 ‘plaintext-only’这个属性,我一眼就看到,从字面上理解,就是只保存纯文本,哇!!简直太棒了吧,马上上代码试了试,果不其然,粘贴进来的文字,全部样式都去除!!!
以上。
div可编辑框,去除粘贴文字样式😄的更多相关文章
- 关于div可编辑的复制粘贴问题
todoFilter(e) { e.preventDefault(); if (!e.target.getAttribute('contenteditable')) { return; } const ...
- div 可编辑--获取光标位置插入元素
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Language" ...
- (转) CCEditBox 编辑框
CCEditBox 编辑框 原文: http://blog.csdn.net/cloud95/article/details/8773470 分类: cocos2d-x 2013-04-08 19:1 ...
- [Python] wxPython 编辑框组件学习总结 (原创)
1.总结 1.常用4种 编辑框 的构造 1.普通编辑框 单行输入的简单编辑框 (?为所在框的对象,同下) self.textBox = wx.TextCtrl(parent = ?) 2.密码编辑框 ...
- Android 编辑框插入表情图片
首先,把整理好的表情图片以及布局用到的一些图片导入到项目的res/drawable目录中. 然后,编辑res/layout目录下布局.xml文件,这里我把oschina客户端的布局代码贴上来,供大家参 ...
- 通过编写串口助手工具学习MFC过程——(六)添加Edit编辑框控件
通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...
- easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字
先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
- js-处理div设置的编辑框处理焦点定位追加内容
具体实现方法如下: 首先要让DIV启用编辑模式 <div contenteditable=true id="divTest"></div> 通过设定cont ...
- Axure 文本框去掉边框 富文本 粘贴文字图标
在今天做原型的过程中,碰到两个问题: 1 文本框该如何去掉边框 2 富文本粘贴文字图标 第一个问题:首先是思路错了,又跑到元件上面找边框,跑到style里面去border的线,结果是不成功. 正解:属 ...
随机推荐
- tomcat-dbcp数据库连接池配置以及使用时候的一些坑
一.数据库连接池 开发的时候经常会需要对数据库进行一些操作,比如说常见的增删改查之类的,当数据量小的时候,可以直接进行操作,但是当数据量增多的时候,每一次连接以及释放数据库都会耗费一定的时间,这个时候 ...
- VMWare启动虚拟机失败,提示锁定文件失败解决方法
1.问题描述:未正常关闭虚拟机,重新启动时,VMWare启动虚拟机失败 2.解决方法: ①找到该虚拟系统所在的目录,即弹出框中的目录,在目录中找到Windows XP Professional.vmx ...
- Java原生隐藏字符-工具类
package com.seesun2012.common.util; /** 隐藏字符-工具类 @author seesun2012@163.com */ public class HiddenCh ...
- axios请求报Uncaught (in promise) Error: Request failed with status code 404
使用axios处理请求时,出现的问题解决 当url是远程接口链接时,会报404的错误: Uncaught (in promise) Error: Request failed with status ...
- [转]JFreeChart简介及下载、配置
JFreeChart简介 JFreeChart是完全基于Java语言的开源项目,因此可以使用在Java开发环境中,包括Java应用程序,或者是Java Web应用都没有任何问题.结合iText项目,可 ...
- C#中TransactionScope的使用方法和原理(摘)
出自51CTO博客:http://cnn237111.blog.51cto.com/2359144/1271600 在.net 1.1的时代,还没有TransactionScope类,因此很多关于事务 ...
- 2.storm的安装
1.前提是linux系统已经安装了上一篇讲的Zookeeper和jdk[1.7及以上版本]还有python[centos已经自带,2.6及以上版本] 2.解压storm压缩包 sudo tar -zx ...
- 洛谷P1730 最小密度路径(floyd)
题意 题目链接 Sol zz floyd. 很显然的一个dp方程\(f[i][j][k][l]\)表示从\(i\)到\(j\)经过了\(k\)条边的最小权值 可以证明最优路径的长度一定\(\leqsl ...
- 前端如何使用proxyTable和nginx解决跨域问题
最近经常遇到跨域的问题,有时候问题虽然解决了,但是还是会有些模棱两可概念不清,于是在网上看了一些教程结合实际使用,做个笔记. 1.跨域原因 浏览器的限制 跨域(协议/域名/端口的不同) XMLHttp ...
- elasticsearch5.5.2环境搭建
运行elasticsearch5.5.2需要jdk1.8版本以上 1.elasticsearch可以去官网或github下载,window系统推荐zip压缩版 2.解压后 进入bin目录运行elast ...