上个月做了个聊天的需求(网页版的)。说到聊天都想到输入框,说到输入框都会想到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可编辑框,去除粘贴文字样式😄的更多相关文章

  1. 关于div可编辑的复制粘贴问题

    todoFilter(e) { e.preventDefault(); if (!e.target.getAttribute('contenteditable')) { return; } const ...

  2. div 可编辑--获取光标位置插入元素

    <!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Language" ...

  3. (转) CCEditBox 编辑框

    CCEditBox 编辑框 原文: http://blog.csdn.net/cloud95/article/details/8773470 分类: cocos2d-x 2013-04-08 19:1 ...

  4. [Python] wxPython 编辑框组件学习总结 (原创)

    1.总结 1.常用4种 编辑框 的构造 1.普通编辑框 单行输入的简单编辑框 (?为所在框的对象,同下) self.textBox = wx.TextCtrl(parent = ?) 2.密码编辑框 ...

  5. Android 编辑框插入表情图片

    首先,把整理好的表情图片以及布局用到的一些图片导入到项目的res/drawable目录中. 然后,编辑res/layout目录下布局.xml文件,这里我把oschina客户端的布局代码贴上来,供大家参 ...

  6. 通过编写串口助手工具学习MFC过程——(六)添加Edit编辑框控件

    通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...

  7. easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字

    先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...

  8. js-处理div设置的编辑框处理焦点定位追加内容

    具体实现方法如下: 首先要让DIV启用编辑模式 <div contenteditable=true id="divTest"></div> 通过设定cont ...

  9. Axure 文本框去掉边框 富文本 粘贴文字图标

    在今天做原型的过程中,碰到两个问题: 1 文本框该如何去掉边框 2 富文本粘贴文字图标 第一个问题:首先是思路错了,又跑到元件上面找边框,跑到style里面去border的线,结果是不成功. 正解:属 ...

随机推荐

  1. TabLayout实现底部导航栏(2)

    TabLayout是android.support.design里的一个控件,使用它可以很方便的做出顶部导航和底部导航.类似于这样的,能设置选中时字体的颜色和选中时的图片. 效果如图: 首先我们在 b ...

  2. 小程序 给最外层view设置百分之百高度不起作用

    <view class="content"> <view class="today"> <view class="inf ...

  3. Unity 代码控制游戏对象是父物体的第多少个子对象

    一个canvas下的游戏对象,排列顺序越往下,渲染顺序就越靠后,就会覆盖在先前的图形上.也就是说,运行游戏后,物体的渲染顺序是一个一个计算的. Transform.SetSiblingIndex(in ...

  4. 阿里云服务器对外开放tomcat端口访问

    今天第一次在阿里云服务器ecs上安装完成tomcat,然后启动tomcat之后.在本地输入ip:端口,发现不能访问. 出现这个的原因可能是你购买的服务器是 专有网络 类型的 如果是专有网络类型的服务器 ...

  5. 【算法】K-Means聚类算法(k-平均或k-均值)

    1.聚类算法和分类算法的区别 a)分类 分类(Categorization or Classification)就是按照某种标准给对象贴标签(label),再根据标签来区分归类. 举例: 假如你有一堆 ...

  6. [linux] uptime 命令中关于平均负载的解释

    1.当前时间 00:13:25 2.系统已运行的时间 9小时19分 3.当前在线用户 2 user 4.平均负载:0.17, 0.12, 0.07 最近1分钟.5分钟.15分钟系统的负载 为了更好地理 ...

  7. HDU 5289——Assignment——————【RMQ+优化求解】

    Assignment Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  8. 深入理解JavaScript系列(26):设计模式之构造函数模式

    介绍 构造函数大家都很熟悉了,不过如果你是新手,还是有必要来了解一下什么叫构造函数的.构造函数用于创建特定类型的对象——不仅声明了使用的对象,构造函数还可以接受参数以便第一次创建对象的时候设置对象的成 ...

  9. 5、栅格布局:ion-grid

    /* --- html ----*/ <ion-content class="tabs"> <ion-grid> <h1>没有 warp 的 i ...

  10. PAT 1040 Longest Symmetric String

    #include <cstdio> #include <cstdlib> using namespace std; ]; ]; int syslen(char str[], i ...