document.execCommand & contenteditable

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/contenteditable

demo

click copy

https://codepen.io/webgeeker/pen/XOJaEP


<blockquote contenteditable="true">
<p>Edit this content to add your own quote</p>
</blockquote> <cite contenteditable="true">-- Write your own name here</cite>
.output {
font: 1rem 'Fira Sans', sans-serif;
} blockquote {
background: #eee;
border-radius: 5px;
margin: 16px 0;
} blockquote p {
padding: 15px;
} cite {
margin: 16px 32px;
} blockquote p::before {
content: '\201C';
} blockquote p::after {
content: '\201D';
} [contenteditable='true'] {
caret-color: red;
}

document.execCommand & contenteditable的更多相关文章

  1. ios9.3.3版本下 document.execCommand("copy") 失败

    copyText()安卓,ios11,ios12都可用 ,并且不弹起输入键盘 // 复制copyText function copyText(text) { var input = document. ...

  2. Javascript中document.execCommand()的用法

    document.execCommand()方法处理Html数据时常用语法格式如下:document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指令 ...

  3. document.execCommand 常用的方法

    execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用如下格式: document.execCommand(sCommand[,交互方式, 动态参数]) , ...

  4. javascript的document.execCommand(转)

    document.execCommand()方法处理html数据时常用语法格式如下: 代码: document.execCommand(sCommand[,交互方式, 动态参数]) 其 中:sComm ...

  5. document.execCommand(”BackgroundImageCache”, false, true)

    很多时候我们要给一些按钮或是img设置背景,而为了达到数据与表现样式分离的效果,通常背景样式都是在CSS里设定的,但是这个行为在IE会有一 个Bug,那就是因为 IE默认情况下不缓存背景图片,所以当鼠 ...

  6. 简易博客编辑器:玩转document.execCommand命令

    xhEditor是基于jQuery开发的跨平台轻量可视化XHTML编辑器,基于LGPL开源协议发布.今天就把它山寨一下. 上几张图,看看效果: 先做出菜单部分:发现是一张背景图片,所以用图片映射的方法 ...

  7. document.execCommand()函数可用参数解析

    隐藏在暗处的方法-execCommand() 关键字: javascript document document.execCommand()方法可用来执行很多我们无法实现的操作. execComman ...

  8. 前端复制功能的若干 -- document.execCommand()

    最近涨停科技公司实习,由于backend基础太弱...强行前端了一把..搞了两周才搞下页面里copy的功能,期间有些琐碎,恐忘,记录在此. 目前copy主流有四种方式:ZeroClipboard,Cl ...

  9. 使用document.execCommand复制内容至剪贴板

    API https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand 兼容性 http://caniuse.com/#se ...

随机推荐

  1. 在使用Reference Source调试.Net 源代码时如何取消optimizations(代码优化)-翻译

    在使用PDB调试XAF时,发现好多变量都看不到.都被优化掉了. 下面的方法可以解决. 当你在使用Reference Source functionality in VS 2008 调试.Net 的源代 ...

  2. SpringBoot日记——国际化篇

    听起来高大上的国际化,起始就是在利用浏览器语言,或者页面中的中英文切换,将页面的文字在其他语言和中文进行切换,比如: 我们想让这个功能实现,点击中文,页面就是中文的,点击英文就是英文的. 国际化配置 ...

  3. 接口测试中抓包工具Charles的使用

    在被测接口并没有明确的接口文档给出时,我们需要借助抓包工具来帮助测试,利用抓包工具我们几乎可以获得接口文档中能给你的一切.常见的抓包工具有Charles和Fiddler, Fiddler只能用在Win ...

  4. (2017)你最不建议使用的Python Web框架?

    https://www.sohu.com/a/164042813_737973   挺有意思的 经过一周的Django学习,以及对比,最终选定了以Flask入手来学习Python web开发.

  5. tomcat 在liunx中shutdown后进程仍然存在的两种实用解决办法

    方法一: 查找tomcat进程并kill ps -elf | grep ${ctompath} | grep -v grep | awk '{print $4}' | xargs kill -9 此处 ...

  6. 通过spark-submit提交hadoop配置的方法

    通过spark提交的spark开头的配置在程序启动后会添加到SparkConf中,但是hadoop相关的配置非spark开头会被过滤掉,但是只要在这些配置的key前面添加spark.hadoop.前缀 ...

  7. Shader做剪影效果

    某渣渣甩了一个需求给我,并且说我不会写.我明知是激将法,但是想想这需求也太简单了,我好像也不怎么会QAQ.为了表示我对shader的热爱,写就写. 需求是这样的: 这是一个漂亮的MM,但是渣渣不想让人 ...

  8. Python20-Day04

    ##########迭代器.生成器和面向过程编程########## 一.迭代器 迭代器是一个重复的过程,每次重复即一次迭代,并且每次迭代的结果都是下一次迭代的初始值: l = [1,2,3] cou ...

  9. sublime c/c++ 环境

    sublime c/c++ 环境 参考: 别人的教程1 别人的教程2 注意,一定要用cmd先试一下,编译成功后再用sublime试 我遇到了一个很诡异的问题,就是cmd运行正常但sublime显示 在 ...

  10. web04-LoginServlet

    电影网站:www.aikan66.com项目网站:www.aikan66.com游戏网站:www.aikan66.com图片网站:www.aikan66.com书籍网站:www.aikan66.com ...