1.概念和原理 DOM中并没有直接获取光标位置的方法，那么我们只能间接来获取光标位置。...DOM支持获取光标选中的范围，我们可以以此为切入点，来获取或定位光标的位置，当选取范围起始点和结束点一样时，就是光标插入的位置。 1.1. 术语 anchor：选区起点。 focus：选区终点。...collapseToStart()：取消当前选区，并把光标定位在原选区的最开始处，如果此时光标所处的位置是可编辑的，且它获得了焦点，则光标会在原地闪烁。...collapseToEnd()：取消当前选区，并将光标定位到原选取的最末位，如果此时光标所处的位置是可编辑的，且它获得了焦点，则光标会在原地闪烁。...cloneContents()：克隆一个range的内容片段。 deleteContents()：删除range的内容片段。
一、前言 在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系，通过jQuery我们可以轻松搞定，但原生...IE9~10有[object MSSelection]和[object Selection]两种类型 获取[object MSSelection]： document.selection ...获取[object Selection]： document.getSelection() 和 window.getSelection() 3....IE5.5~IE8仅有[object MSSelection]类型 获取方式： document.selection 注意：document.selection是IE的特有属性。...(rawRet & 16); return ret; }; compareDocumentPosition可以算是W3C标准中比较两节点位置关系的一大利器，不仅可以判断祖孙关系，还可以判断其他关系哦
JavaScript 来构建跨平台桌面应用程序的一个开源库。...this.SET_WINMAXIMIZE(false) }else { currentWin.maximize() this.SET_WINMAXIMIZE(true) } }, 项目中使用的是局部拖动...(window.getSelection) console.log(document.selection) if (window.getSelection) { //ie11 10 9 ff safari...obj.focus(); //解决ff不获取焦点无法定位问题 var range = window.getSelection(); //创建range range.selectAllChildren...(obj); //range 选择obj下所有子内容 range.collapseToEnd(); //光标移至最后 } else if (document.selection) { //ie10
有两种方式 一是可以选中网页中的数字，然后点击按钮，就会显示厘米、美码、英码三种。 二是如果第一种方式选择的有问题或者没选择，就会弹出输入框，即可手动输入数字。 下面贴出没什么用的代码来。...// 定义欧码（输入的那个） var EUR; // 获取选择 if(window.getSelection){ userSelection=window.getSelection(); }else...if(document.selection){ userSelection=document.selection.createRange(); } EUR=parseFloat(userSelection...那就可以操作页面的js来让它们显示出来。 经过一番折腾，做出来了一个简单的。 点击后显示视频封面和标题，并以红色视频标题展示出来。 但很快我觉得这样也不太好，不够人性化。因为视频没了，点也点不开。...); // 删除模糊效果和视频时间 $(this).find('a.disabled').attr('class','').find('.length').remove(); }); 就酱 ╰
我们可以通过3种不同的方式来实现此功能。 在跳转到解决方案之前，让我们先了解一些定义。 该parseFloat()函数解析一个参数（如果需要，首先将其转换为字符串）并返回一个浮点数。...它使用对象的每个不同属性的值调用要执行的语句来调用自定义迭代挂钩。...我们可以使用以下两种方法来实现此功能。 1）、includes（） 该includes()方法确定一个数组是否在其条目中包括某个值，是返回值true还是false适当的值。...当我们想检查对象的特定属性是否未定义时，我们可以直接使用if条件和===运算符进行检查。...你可以使用Object.values()它来检索值，然后array.reduce()组成一个新的对象： const data = [{ prop_name: 'test1',
首先说第一个问题： 相信大家在配置tomcat的时候，运行之后有时候出现一个 8005的问题，这个解决很简单： 提示错误是： ?...地址已经被占用，其实就是含有8005这个进程已经在使用了，具体应该是这样的：TCP 127.0.0.1：8005 2280 2280指的是PID 强制性杀死该进程是无用的：{ 方法是这样的：...selection = document.getSelection(); }else if (document.selection){ selection...他同时实现了选中 复制 搜索等JS功能，有需要的可以去他那里下载。...第三个问题是：fakepath问题，我目前还没有解决，IE浏览器中解决了，笨办法：在Internet选项卡中勾选启用 上传服务器显示本地目录路径 但是在开发中我们是不能去让用户设置这个问题的，需要程序自己去解决
Bookmarklet是一个复合词，由Bookmark（书签）和-let（小的）构成，中文可以译成"书签工具"。 它在形式上与"书签"一样，都保存在浏览器收藏夹里。...它通常在网页中以链接的形式出现，就像下面这样： xxx 用户直接把这个链接拖到地址栏或收藏夹就可以用了。...有了它，浏览器才知道要用javascript解释后面的代码。它的作用等同于将代码放在之间运行。 2....压缩工具可以帮忙减少长度，但是使用下面提到的连接外部代码的方法，可以避开这个限制。 3. 使用单引号 根据Javascript的语法，单引号（'xxx'）和双引号（"xxx"）都能使用。...不要污染全局变量 Bookmarklet最好不要生成新的全局变量，可以采用直接运行匿名函数的方式： javascript: (function(){...})(); 上面式子的第一个括号，定义了一个匿名函数
看情况来定是否采用，体积小，我认为我的功能够用就可以了！...，这个功能是我点击按钮（文本复制）之后，出现的复制提示框，并不是我手动直接选中的， 是input 输入框可以达到这个效果，但是有个问题是，你使用了input之后如果你打算 disabled="disabled...2D-Position 允许通过拖曳移动绝对定位的对象。...CreateLink 在当前选中区上插入超级链接，或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。 Cut 将当前选中区复制到剪贴板并删除之。 Delete 删除当前选中区。...OverWrite 切换文本状态的插入和覆盖。 Paste 用剪贴板内容覆盖当前选中区。 PlayImage 目前尚未支持。 Print 打开打印对话框以便用户可以打印当前页。
)">我是被复制的内容2 function selectElementText(el) { if (document.selection...} } 注意：这个方法只能是纯文本元素，如果像 input 、 textarea 表单元素，传入后无法进行选中 ，对于表单元素，可以通过执行...select() 方法，来进行复制 // 创建输入框 var textarea = document.createElement('textarea'); document.body.appendChild...document.execCommand('copy', true); document.execCommand注意 ： copy 命令执行方法，第二个参数要传入 true，否则不生效； 虽然很好用，但官方文档已不推荐使用...MDN第二个参数的解释：一个布尔值，指示是否应显示默认用户界面。
为了让开发人员更方便地控制页面，“DOM2 级遍历和范围”模块定义了“范围（Range）接口”。通过范围（Range）可以选择文档中的一个区域，而不必考虑节点的界限。...比如我们可以获取当前鼠标选中区域中的文字，或通过编程将指定区域中的文字选中； 2. 兼容性怎么样？ 兼容性这方面，IE 从没让我们失望过... ? ?...接口简介： 获取文档中当前选中的部分： var selRange = window.getSelection(); 获取当前选中部分的文本； selRange.toString(); 调整当前选中区的...IE 从 9 开始，就实现了 W3C 的标准 Range 接口；但IE7、IE8这些老古董，就只能用 IE 自己的 TextRange 和 selection 接口； ? 4.1....4.2. selection 与 W3C 的 selectedRange 含义相同，代表当前文档中选中的部分； 接口简介： 获取文档中当前选中的部分： var selection = document.selection
例如： let range = newRange(); 然后使用 range.setStart(node, offset) 和 range.setEnd(node, offset) 来设置选择边界。...文档选择是由 Selection 对象表示的，可通过 window.getSelection() 或 document.getSelection() 来获取。...根据 Selection API 规范：一个选择可以包括零个或多个范围（不过实际上，只有 Firefox 允许使用 Ctrl+click (Mac 上用 Cmd+click) 在文档中选择多个范围）。...综上所述：一般我们只有一个 Range，当我们的光标在 contenteditable 的 div 上闪动的时候，其实就有了一个 Range，这个 Range 的开始和结束位置都是一样的。...focusNode 节点，然后就可以获取它的父节点以及兄弟节点。
如果我们想使用 execCommand 执行 copy 的话，那么应该先选中你想复制的元素。 这里,另外还会使用到一个新的 API, window.getSelection()。...基本使用就是： // 输出选中的文本 window.getSelection().toString(); 我们一般只是使用该 API 进行辅助作用。...所以，这里需要用到 click 事件来辅助（当然，你也可以使用其他事件来进行代替）。...当然，有同学会想，不是还有其他事件比如 cut, paste吗？是不是也可以这么做呢？ 额... 一开始，我也是这么想的，但现实往往会给您一个轻轻的爱抚。...根据上面的说法，我们可以通过利用 paste 的相关方法，来具体应用到实践中。比如，防止用户粘贴信息。这特别适用于那些做题页面，防止你查资料然后 copy 相关答案。
能找到这个NB的编辑器是因为公司项目需要一个可视化的cms编辑器，类似微信公众号编辑文章。可以插入各种卡片，模块，问题，图片等等。然后插入的内容还需要能删除，拖拽等等。...先从官方例子里面扒一个图瞅瞅： ? PS：和大多数文本编辑器长得都差不多，如果功能都一样，那也不用介绍了。 他NB，强大的地方就是所有能看到的，不能看到的功能统统都是一个一个独立的模块。...各种自定义的使用说明 比如上图中的菜单栏可以自定义，对已有的菜单栏定义：继续从官方例子里面扒图： ? 当然，如果插件自带的功能没有，比如你要做一个动画在菜单栏上加一个图标、选项或者什么的。...修改字体大小选择，使用自定义的列表和单位(rem) 自带的字体大小编辑有2个如下。但是显然不太能支持我们的用法。一开始吧size扩展成了px。但是后来经过测试发现手机端使用的是rem，so。...然后在来一个高级一点的。设置字体为粗体 quill默认使用的是strong或者b标签方式。其实这也是没有问题的，但是架不住公司的"高级"前端对手机端的所有html标签都reset了。
前端操作input 的焦点功能 经常会用到，你会用到以下功能吗？ 选中input框中的某几个字母，监听该事件，获取选中的字母内容。 input的焦点向左移动一个，就像封面图一样，在括号中输入内容。...本文就结合 问题1 的概念，以复杂计算器为例，来解决问题2。...问题1 选中input 部分内容， 可以使用 selectionStart、 document.selection、 createRange、 createTextRange 等 API 来实现，具体不在此处展开说明...2） 拼接 input 旧值和 按钮新值 3） 设置 input 新的焦点位置，即老位置+按钮值长度 + 按钮功能需要变动的长度 4） 解决IE下点击按钮时，input焦点永远为0的行为。...（图为点击按钮时的代码） 以下内容基于jQuery-1.7实现 解决问题： 1） 知识点 selectionStart， IE8及以下不支持该属性，使用document.selection 替代方案解决
1、功能需求 点击 tab栏,可以切换效果. 点击 + 号, 可以添加 tab 项和内容项. 点击 x 号, 可以删除当前的tab项和内容项....[i].index = i; this.lis[i].onclick = this.toggleTab; 使用排他,实现只有一个元素的显示 toggleTab() { //将所有的标题与内容类样式全部移除...点击x可以删除当前的Ii选项卡和当前的section x是没有索引号的,但是它的父亲li有索引号,这个索引号正是我们想要的索引号 所以核心思路是:点击x号可以删除这个索引号对应的Ii和section...li 和section remove()方法可以直接删除指定的元素 that.lis[index].remove(); that.sections[index].remove()...')) return; // 当我们删除了选中状态的这个li 的时候, 让它的前一个li 处于选定状态 index--; // 手动调用我们的点击事件 不需要鼠标触发
目录 怎么使用JavaScript实现一个剪贴 上面的方法不是很完美我们优化一下 思考一个问题 使用react和typescript重写和优化一下 如何使用copyme 原文参考 写在最前面 有一个简单的需求...想直接参考 react 使用的可以看 使用react和typescript改写和优化一下 大概设计如下，有多条信息，然后用户可以点击右边的复制 icon 进行快捷的复制。...我们用户在使用我们的剪贴板之前可能已经选择了已存在 html 中的文本内容了，所以我们这里需要多加一些判断防止遗漏用户选择的文本。...思路 1、首先创建一个 targetNode，设置绝对布局，赢藏我们的元素 2、document.getSelection() 已经由 window.getSelection() 替代了，具体流程如上...3、创建一个 result 标记能否能正常 使用剪贴功能，不能的返回 false 4、删除这个 targetNode function createNode(text) { const node
有个共识InnoDB引擎的数据表记录一旦超过2000万，它的读写性能就很差，我们用物理删除能缩小表的体积，提升读写性能，这挺好的，原则上也是这么一个道理，但是物理删除数据的代价你了解吗？...，那么查询的时候可以快速跳过很多的数据，直接定位到我们想要的数据，像英文词典，如果想要查找Object这个单词，直接就可以定位到O开头的单词去小范围的查找，这样就加快了查询的速度。...那我们再来看id>1000这个顺序，因为主键是按照顺序排序的，索引数据库可以很快的定位到id=1000这样的记录，查询的速度是非常快的，后续的查询也是做的这么个二叉树的查找，所以用主键去做分页查询的条件...但是现在有个问题，如果我们对数据做了物理删除，这个主键就变成不连续的了，也就是意味着利用主键来分页查找是不行的，因为从1000到1020这个主键范围之间可能只有几条数据而不是完整的20条记录。...，这种问题问的非常的好，这是童鞋是认真思考了，这个问题可以很优雅的解决，那就是再创建一张数据表历史表，这个表专门用来保存无效的数据，并且这个表还可以使用mongodb数据库，因为逻辑删除的数据重要性并不是那么高
很简单：用简单的逻辑和尽可能少的代码来解决一个复杂的问题。随着 ES6 箭头函数的引入，可以创建看起来优雅和简单的单行代码。 在本文中，我将与你分享11 种罕见但功能强大的 one-liner。...让我们从第一个开始吧！ 1、获取字符串中的字符数 获取字符数是一个有用的实用程序，在许多情况下都很有用。你可以使用它来获取空格数和随后的单词数，或者这可用于获取字符串中某个分隔符的计数。...这是一个强大的单行程序来计算两个日期之间的天差。但还有更多的事情要做。和我一样，你可以创建自己的单线来计算月、年差等。...9、在网页上获取选定的文本 浏览器在全局 windows 对象上有一个名为 getSelection 的内置方法。 使用此方法，你可以创建一个单行，返回网页上突出显示或选定的文本。...我试着选择那些不是很受欢迎和知名度的东西，这样你就可以学习新东西。我每天都在使用它们，我想对你也会有所帮助。
这一块先放下，自己去看看selection和range相关的api，研究一下有没有另外的解决方案 基于selection & range的方案 执行getSelection()后，会得到一个selection...对象，其中有一个getRangeAt方法可以获取range对象。...当选择完成，渲染了container，拿到它的ref引用，再setstate(当前container元素) 页面内操作完全没问题，但问题来了，当props改变，需要删除元素的时候，立刻报错了。...这样的情况下，一切手动来解决，先append，当state、props变化的时候，又把它删除，这些全是原生js操作，而且都在container里面做的，完全可以不直接碰到react的state相关的信息...原本设计是一个组件，实际上应该做成一个hook的，改起来也很简单，就不说了 最后 这个小功能使用只是一瞬间，但实现过程很复杂，涉及到的知识点比较多 react下使用原生js，避免直接和state、props
vim 编辑器就像海洋一样，美好和快乐，如果你深入其中，你就会情不自禁的爱上它，并且再也不愿走出来。...vim 编辑器之所以经久不衰，就是因为它有着一股魔力，无论你使用它多少年了，你总能在某一天看到其他人对它更优雅的操作，它的上限很高，高到可以让你使用它快速地完成任何你想编辑的代码。...:set spell insert mode quick delete 我们知道在正常模式下，我们可以通过d和x进行快速地删除文本，那么在插入模式，就是编辑文件的时候，我们有办法快速删除单词吗？...ctrl+w ctrl+h ctrl+u ctrl+k open particular line 当我们使用一些软件查询到某个关键词出现在某行的时候，我们希望我们vim可以直接定位到这一行，那么我们可以使用...vim + line的方式打开文件，就可以直接跳转到指定行号，当然这个其实并没有太多的意义，因为进入文件之后，在通过行号定位也不算麻烦，可能唯一的好处应该就是对于一个大文件的话，可以省略渲染，直接找到位置
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
