用 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操作Cookies的实现代码
Oct 09 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
js实现导航吸顶效果
Feb 24 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
layui的select联动实现代码
Sep 28 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
PHP 数组实例说明
2008/08/18 PHP
php通过各种函数判断0和空
2020/07/04 PHP
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
python getopt 参数处理小示例
2009/06/09 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
python处理csv中的空值方法
2018/06/22 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
英文求职信范文
2014/05/23 职场文书
英语教师求职信范文
2015/03/20 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python