document.createRange剪贴板API】的更多相关文章

js实现复制到剪贴板 document.createRange() API 选中元素→range→selection是一一对应的,即选区必须连续,不可以有分开的多个区域.另外,被选元素必须在dom树上,不可以是游离元素,并且实践发现display不能为none,visibility不能为hidden,即使不需要渲染.也就是说我可以创建一个游离元素,插入dom树,选择后copy,然后立刻从dom树移出,整个过程都在浏览器下一次渲染之前,所以页面上没有任何变化. 为了实现选中分开的三列table,最…
在过去的几年里我们只能使用 document.execCommand 来操作剪贴板.不过,这种操作剪贴板的操作是同步的,并且只能读取和写入 DOM. 现在 Chrome 66 已经支持了新的 Async Clipboard API,作为 execCommand 替代品. 这个新的 Async Clipboard API 还可以使用 Promise 来简化剪贴板事件并将它们与 Drag-&-Drop API 一起使用. 演示视频:https://zhuanlan.zhihu.com/p/... 复…
5. UPDATE API 更新操作可以使用脚本来更新.更新的时候会先从索引中获取文档数据(在每个分片中的集合),然后运行脚本(使用可选的脚本语言和参数),再果进行索引(还允许删除或忽略该操作).它使用版本号保证在读取文档和重新索引期间,被更新的文档不会发生任何修改操作. 注意,update操作会重新索引文档,它可以减少网络往返次数和降低在获取文档和索引文档之间发生版本号冲突的可能.要支持这一特性,需要开启_source字段(因为要读取旧数据,和替换操作不一样,替换操作不需要读旧数据). 例如,…
Single document APIs Index API Get API Delete API Update API Multi-document APIs Multi Get API Bulk API Delete By Query API Update By Query API Reindex API 所有CRUD api都是单索引api.索引参数接受单个索引名,或指向单个索引的别名. 1.Index API index API 可以添加或者更新特定索引的文档,并使其可搜索.下面的例子插…
Document flow API in CRM 以一个具体的例子来说明.在Appointment的Overview page上能看见一个名叫Reference的区域,这里可以维护一些其他的业务文档的ID,这样可以将该业务文档同当前正在编辑的Appointment关联起来. 我写了一个简单的报表来演示如何用ABAP代码给这个Reference区域的字段赋值,背后用到的实际上就是CRM Document flow相关的API. 报表的源代码在我的github上: 代码的核心就是使用CRM One…
我们web上的复制,有时候尽管可以用鼠标选中,然后复制,但是某些时候,文字不方便选中.因此,我们自定义一个复制按钮,然后通过点击它,把想要的内容复制到剪贴板上.我归纳总结了几种方法: 1.ZeroClipboard.js      以前用过这个js,它需要配合swf格式的flash发挥作用,可谓曲线救国,而且不太好用.它的浏览器兼容性ok,我摘了官网上的原话: The ZeroClipboard library provides an easy way to copy text to the c…
过滤剪贴板内容以及定位可编辑div光标的方法: <!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <script type="text/javascript" src="jquery.min.js"></scrip…
近期看了一个语音识别的dome-----Web Speech API 本api为js调用云端接口识别 个人测试了一下,响应速度还是比较快的 注意:本API与官网需翻墙使用和访问 展示效果: 页面代码如下: <!DOCTYPE html> <meta charset="utf-8"> <title>Web Speech API Demo</title> <style> * { font-family: Verdana, Aria…
这个笔记来自网络资料的总结 简书大佬三省吾身_9862 tuobaye个人博客 富文本有相关3个API和一个新属性 var selection = window.getSelection(); var range = selection.getRangeAt; document.execCommand(x,y,z); 新属性 contenteditable="true" 第一步 <!-- 让标签变成可输入的区域 --> <div contenteditable=&qu…
前言 本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时遵循的原则,总共包含了七个大块.系卤煮自己总结的一些经验和教训.本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来.很难做到详尽充实,如果有好的建议或者不对的地方,还望不吝赐教斧正. 一.接口的流畅性 好的接口是流畅易懂的,他主要体现如下几个方面: 1.简单 操作某个元素的css属性,下面是原生的方法: document.querySelector('#id').style.color = 'red'; 封装之后 fun…
基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这个Node接口在JS中是作为Node类型实现的.在IE9以下版本无法访问到这个类型,JS中所有节点都继承自Node类型,都共享着相同的基本属性和方法. Node有一个属性nodeType表示Node的类型,它是一个整数,其数值分别表示相应的Node类型,具体如下: Node.ELEMENT_NODE…
上一篇我们学习了常见的通用对话框,本篇来了解剪贴板的使用,它常用于复制粘贴功能. 剪贴板是Windows最早就加入的功能,由于该功能非常实用,我们几乎每天都会使用到.通过剪贴板,我们就可以将数据从一个应用程序传递到另一个应用程序,是一种简单的进程间通信. 许多文档处理软件都有复制.剪切.粘贴功能,这些都是用Windows剪贴板实现的,当然我们也可以在我们的程序中实现自己的剪贴板功能,本篇我们就来实现自己的剪贴板.使用剪贴板时,都是先把源数据先传到剪贴板上,再在需要的时候从剪贴板传输到目的处,所以…
source url: https://flowplayer.org/docs/api.html Global API access Use the flowplayer function to get a global handle on the API: flowplayer(function (api, root) { api.bind("load", function () { // do something when a new video is about to be lo…
---恢复内容开始--- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&…
 一.Range 对象基本概念 通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按钮打印出选中内容,当然注意在不同的浏览器下可选中的内容数量是不同的. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <scr…
1.Range.cloneContents()The Range.cloneContents() returns a DocumentFragment copying the objects of type Node included in the Range. SyntaxdocumentFragment = range.cloneContents(); Examplerange = document.createRange();range.selectNode(document.getEle…
在刚开始的时候,我们只能用 getElementById,getElementsByClassName,getElementsByTagName 这几个 DOM 方法查找 DOM 树中的元素.后来,在 W3C 的选择器 API 标准中[1],提供了 querySelector 和 querySelectorAll 这两个利用 CSS 选择器查找元素的方法.它们的语法如下: element = document.querySelector(selectors); elementList = doc…
学习<JavaScript 高级程序设计> 12章dom范围的笔记 dom2级在Document类型中定义了 createRange()方法: 创建range对象很简单 var range = document.createRange() 操作range对象,有两个步骤,1选择节点,2,操作节点 选择节点: 最简单的选择节点方法: selectNode() :选择整个节点,包括子节点 selectNodeContents()  选择节点的子节点 区别就是 例如这样一段html代码中 <p…
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这个Node接口在JS中是作为Node类型实现的.在IE9以下版本无法访问到这个类型,JS中所有节点都继承自Node类型,都共享着相同的基本属…
Java™ Platform, Standard Edition 7API Specification This document is the API specification for the Java™ Platform, Standard Edition. See: Description Packages  Package Description java.applet Provides the classes necessary to create an applet and the…
本节继续介绍range对象的方法,包括cloneRange,cloneContents,extraContents,createContextual,createContextual-Fragment,insertNode,compareBoundaryPoints,collapse,detach方法. 1.cloneRange,cloneContents,extraContents方法 cloneRange:对当前的range对象复制,返回复制的对象 <body> <script>…
1.Range对象的基本概念 一个Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改网页上的任何区域. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> function rangeTest(){ var html; sh…
range对象的extractContents()方法: extractContents() 方法删除文档内容,并以 DocumentFragment 对象的形式返回它; DocumentFragment配合range对象:相当于剪切.复制.粘贴其子孙节点 <body> <div id="div1" style="background: greenyellow;width: 200px; height:100px;">这里有一段文字</…
range对象:是一种fragment(HTML片断),它包含了节点或文本节点的一部分.一般情况下,同一时刻页面中只可能 有一个range,也有可能是多个range(使用Ctrl健进行多选,不过有的浏览器不允许,例如Chrome). 可以从selection中获得range对象,也可以使用document.createRange()方法获得1.getSelection():获取页面选中的信息;2.rangeCount:区间数,选中几个内容;3.selection.rangeCount;4.sel…
本节首先简要介绍Elasticsearch的数据复制模型,然后详细描述以下CRUD API: Single document APIs Index API Get API Delete API Update API Multi-document APIs Multi Get API Bulk API Delete By Query API Update By Query API Reindex API注意:所有CRUD API都是单索引API. index参数接受单个索引名称或指向单个索引的别名…
在 HTML5 中,一个 Range 对象代表页面上的一段连续区域.通过 Range 对象,可以获取或修改页面上的任何区域.包含获取,修改,删除和替换等操作. 一:获取range对象的值 Range对象提供鼠标选取功能,通过Range对象可以获得选取的内容,以及选取的内容的个数. var s  = document.getSelection();//此方法获得选中内容,获取range对象 s.rangeCount;//获得选中个数 function rangeText(){ var e_show…
APIs for manipulating documents loaded into the browser. The most obvious example is the DOM (Document Object Model) API, which allows you to manipulate HTML and CSS — creating, removing and changing HTML, dynamically applying new styles to your page…
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这个Node接口在JS中是作为Node类型实现的.在IE9以下版本无法访问到这个类型,JS中所有节点都继承自Node类型,都共享着相同的基本属…
概述 今天逛MDN,无意中看到了web API简介,觉得挺有意思的,就认真读了一下. 下面是我在读的时候对感兴趣的东西的总结,供自己开发时参考,相信对其他人也有用. 什么是API API (Application Programming Interface)就是一些规则,它使软件与其它东西更好的交互. 原文如下: An API (Application Programming Interface) is a set of features and rules that exist inside…
Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这个Node接口在JS中是作为Node类型实现的.在IE9以下版本无法访问到这个类型,JS中所有…