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


Posted in Javascript onApril 18, 2017

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

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

这是点击图片以后:

用 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);
 }
}

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

嗯,算是比较完美了。

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

Javascript 相关文章推荐
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 #Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 #Javascript
微信小程序实战之轮播图(3)
Apr 17 #Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 #Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 #Javascript
微信小程序教程系列之新建页面(4)
Apr 17 #Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 #Javascript
You might like
做一个有下拉功能的留言版
2006/10/09 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
VBScript版代码高亮
2006/06/26 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
Python中几种导入模块的方式总结
2017/04/27 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Pytorch转tflite方式
2020/05/25 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
2014年导购员工作总结
2014/11/18 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
英文产品推荐信
2015/03/27 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
python神经网络编程之手写数字识别
2021/05/08 Python
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电