用 js 的 selection range 操作选择区域内容和图片

先放上最后的效果,这是点击图片以前:

这是点击图片以后:

非常清晰,一目了然,就算是小白用户也明白发生了什么。挺好的。

最近在做编辑器相关的东西,遇到一个需求,用户在编辑器中插入或者粘贴的图片要支持点击以后,可以按 Backspace 键或者 Delete 键删除掉。

刚开始拿到这个需求的想法是调用编辑器自带的删除图片方法删掉图片,但后来查看源码发现这个方法是编辑器内部方法,并没有暴露出来,于是第一个思路走不通了。

第二个思路是在编辑器的顶层容器里监听 keyup 事件,然后判断是否是两个删除键,如果是就拦截,然后找到当前点击的图片,手动删掉。

实际上这也是行不通的,原因有二。首先,这个删除是没法阻止的,因为事件的监听是在顶层父元素里,这时候阻止其实是阻止掉事件在顶层容器上的效果,而不是在发生元素上的效果。所有涉及到事件冒泡的地方,在父容器上阻止效果都是不能达到目的的,只能在事件最开始发生的元素上阻止。

然后,当按下删除键的时候,之前点击的图片已经不是点击状态了,已经拿不到了。因为取消选择在前,删除在后。

后来忽然意识到,想要的效果其实就是点击图片的时候选中图片,就像用户自己选中网页中一段内容那样选中那张图片就好了。页面上点击一个图片默认是没有效果的,我要做的仅仅是点击时候选中这个图片就可以了。这样做的好处是,当用户点击图片选中以后,如果点删除键,无论是 Backspace 还是 Delete 键都可以删除;而且如果用户不像删除,直接点击别的地方,或者按下上下左右箭头就可以取消选择,这和用户平时的操作体验是一样的,根本没有什么副作用。

selection 是 HTML5 的新接口,是 window 的一个方法,用法是 window.getSelection().

取得 selection 以后,要把当前图片加入到选取中,selection 有一个 Selection.selectAllChildren() 方法,但这个方法只能选中元素的全部子元素,而我们要选中的是 img 元素自身,img 元素也没有子元素。于是继续在 selection 的方法中看看有没有别的长的像的方法,果然,找到了 Selection.addRange() 看这长相一看就很像我们要找的人。addRange 方法需要传入一个 range 对象,range是啥呢?

平时在页面上选择东西都是鼠标咔一下框一大片,但如果在编辑器里,其实是可以选择好几个片段的,一般按住 Ctrl / Control 键就可以多处选择。我猜这个 selection 就类似于选中的所有区域,range 就类似于每一个单独的选中的片段,先这么理解。

继续往下看,发现 range 有一个 Range.selectNode()方法,这不正是我要找的人吗?先创建一个 range 对象,let range = document.createRange()  createRange 是 document 的方法,然后讲当前图片插入 range,再把 range 插入 selection 中即可。代码如下:

let checkClickImg = function(e) {
 let target = e.target;
 if (target.nodeName.toLowerCase() === 'img') {
  // 删除之前所有的选区
  window.getSelection().removeAllRanges();
  let selection = window.getSelection();
  let range = document.createRange();
  range.selectNode(target);
  selection.addRange(range);
 }
}

这个实现方法的最大优点在于利用浏览器原生自带的功能,这样就和用户的操作习惯保持一致,不会有任何的突兀。选中的效果很明显,而且选中以后无论是删除,还是取消,都跟之前习惯一致,都很容易,更要的是这些操作不用再写代码了啊,因为是浏览器原生自带的功能。

嗯,算是比较完美了。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

(0)

相关推荐

  • document.selection.createRange方法与实例

    配合 execCommand,在 HTML 编辑器中很有用,比如:文字加粗.斜体.复制.粘贴.创建超链接等. 哈哈.我们都是新生来得.大家都来相互帮助呀.这样我们才能进步,我们才能赚大钱! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 这个不错 就是现在文本域里有一段文字,当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框,对话框的信息就是你选中的文字 哪位老大能解决的呀?请多多帮忙!!!谢谢 就是现在文本域里有一段文字,当你选种其中几个字后点击一个按钮或者链接会弹出一个对话

  • jquery 判断selection range 是否在容器中的简单实例

    判断当前选中区域是否在某个父容器中得方法: var range = document.getSelection().getRangeAt(0); if($(range.startContainer).parents("XXXX").length >0) { 在XXX 容器中 } 以上这篇jquery 判断selection range 是否在容器中的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 用 js 的 selection range 操作选择区域内容和图片

    先放上最后的效果,这是点击图片以前: 这是点击图片以后: 非常清晰,一目了然,就算是小白用户也明白发生了什么.挺好的. 最近在做编辑器相关的东西,遇到一个需求,用户在编辑器中插入或者粘贴的图片要支持点击以后,可以按 Backspace 键或者 Delete 键删除掉. 刚开始拿到这个需求的想法是调用编辑器自带的删除图片方法删掉图片,但后来查看源码发现这个方法是编辑器内部方法,并没有暴露出来,于是第一个思路走不通了. 第二个思路是在编辑器的顶层容器里监听 keyup 事件,然后判断是否是两个删除键

  • JS实现获取word文档内容并输出显示到html页面示例

    本文实例讲述了JS实现获取word文档内容并输出显示到html页面.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var w = new ActiveXObject('Word.Application'); va

  • JS如何使用剪贴板操作Clipboard API

    一.Document.execCommand() 方法 Document.execCommand()是操作剪贴板的传统方法,各种浏览器都支持. 它支持复制.剪切和粘贴这三个操作. document.execCommand('copy')(复制) document.execCommand('cut')(剪切) document.execCommand('paste')(粘贴) (1)复制操作 复制时,先选中文本,然后调用document.execCommand('copy'),选中的文本就会进入剪

  • JS未跨域操作iframe里的DOM

    这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴下index.html和iframe引入的a.html内容. index-> <div class="d1"> <iframe src="a.html" frameborder="0" name="one"

  • JS实现css hover操作的方法示例

    本文实例讲述了JS实现css hover操作的方法.分享给大家供大家参考,具体如下: hover我们可以用css的方式写,当然,也可以用js的方式写 <html> <head> <title>js的下拉菜单效果</title> <style type="text/css"> *{ padding:0px; margin:0px; } ul li{ list-style: none; } a{ text-decoration:

  • django传值给模板, 再用JS接收并进行操作的实例

    今天用要django传值给模板, 然后需要用js处理一下.特此记录. 用json.dumps()方法将值传给模板. import json return render(request,'wauth/freetime.html', {'slot_ids': json.dumps(slot_ids)}) 用JSON.parse()接收django传过来的值. var slot_ids = JSON.parse('{{ slot_ids|safe }}'); 以上这篇django传值给模板, 再用JS

  • 原生JS实现旋转轮播图+文字内容切换效果【附源码】

    废话不多说,直接上图看效果: 需求: 点击左右按钮实现切换用户图片与信息: 原理: 点击右侧左侧按钮,把3号的样式给2号,2号的给1号,1号的给5号,5号的给4号,4号的样式给3号,然后根据现在是第几张图片切换成对应的文字: 步骤: 1.让页面加载出所有盒子的样式: 2.把两侧按钮绑定事件(调用同一个方法,只有一个参数,true为正向旋转,false为反向旋转): 3.书写函数: 操作函数:左按钮:删除第一个,添加到最后一个: 右按钮:删除最后一个,添加到第一个: 4.定义变量,根据对应变量切换

  • JS原型与继承操作示例

    本文实例讲述了JS原型与继承操作.分享给大家供大家参考,具体如下: <script> var Beverage = function(){}; Beverage.prototype.boilWater = function(){ console.log("把水煮沸"); }; Beverage.prototype.brew = function(){ throw new Error("子类必须重写该方法"); }; Beverage.prototype.

  • JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】

    本文实例讲述了JS常见DOM节点操作.分享给大家供大家参考,具体如下: DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的文档对象模型. 节点:根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 1.整个文档时一个文档节点. 2.每个HTML元素是元素节点. 3.HTML元素内的文本是文本节点. 4.每个HTML属性是属

随机推荐