用 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 相关文章推荐
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 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实现保存周期为1天的购物车类
2017/07/07 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
Javascript的一种模块模式
2010/09/08 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
pandas多级分组实现排序的方法
2018/04/20 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
python爬虫添加请求头代码实例
2019/12/28 Python
python with (as)语句实例详解
2020/02/04 Python
苹果音乐订阅:Apple Music
2018/08/02 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
传播学毕业生求职信
2013/10/11 职场文书
毕业生找工作推荐信
2013/11/21 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
医生个人年度总结
2015/02/28 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
Go语言空白表示符_的实例用法
2021/07/04 Golang
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS