公众号关联小程序_用 js 的 selection range 操作选择区域内容和图片

  • 栏目:公司新闻 时间:2021-01-12 12:04 分享新闻到:
<返回列表

用 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 对象,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);

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

嗯,算是比较完美了。

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


分享新闻到:

更多阅读

公众号关联小程序_用 js 的 selection range

公司新闻 2021-01-12
用 js 的 selection range 实际操作挑选地区內容和照片 先放上最终的实际效果,它是点一下...
查看全文

广州凡科互联网科技股份有限公司招聘创

公司新闻 2021-01-11
招聘人数:23职位信息岗位职责:1.根据客户项目计划要求,进行市场相关调研及可行性分析,...
查看全文

合肥市微信小程序构建_JS+WCF完成进度条实

公司新闻 2021-01-11
JS+WCF完成进展条即时检测数据信息载入量的方式详细说明 -李鑫超 本文关键详细介绍了...
查看全文
返回全部新闻


区域站点: 南丰县免费建站网站   南宫市网站建设网址   囊谦县自助网站建设系统   南和县建设官方网站   南华县免费建站网站   南江县网站建设网址   南京市自助网站建设系统   南靖县建设官方网站   南康市免费建站网站   南乐县网站建设网址   南陵县自助网站建设系统   南宁市建设官方网站   南平市免费建站网站   南皮县网站建设网址   南市区自助网站建设系统   南通市建设官方网站   南投县免费建站网站   南雄市网站建设网址   南溪县自助网站建设系统   南阳市建设官方网站   南漳县免费建站网站   南召县网站建设网址   南郑县自助网站建设系统   那坡县建设官方网站   那曲县免费建站网站   纳雍县网站建设网址   讷河市自助网站建设系统   内黄县建设官方网站   内江市免费建站网站   内丘县网站建设网址   内乡县自助网站建设系统   嫩江市建设官方网站   聂荣县免费建站网站   尼玛县网站建设网址   尼木县自助网站建设系统   宁安市建设官方网站   宁波市免费建站网站   宁城县网站建设网址   宁德市自助网站建设系统   宁都县建设官方网站   宁国市免费建站网站   宁海县网站建设网址   宁化县自助网站建设系统   宁晋县建设官方网站   宁陵县免费建站网站   宁明县网站建设网址   宁南县自助网站建设系统   宁强县建设官方网站   宁陕县免费建站网站   宁武县网站建设网址   宁乡市自助网站建设系统   宁阳县建设官方网站   宁远县免费建站网站   农安县网站建设网址   磐安县自助网站建设系统   盘锦市建设官方网站   盘山县免费建站网站   磐石市网站建设网址   盘州市自助网站建设系统   蓬安县建设官方网站   澎湖县免费建站网站   蓬莱市网站建设网址   彭山县自助网站建设系统   蓬溪县建设官方网站   彭阳县免费建站网站   彭泽县网站建设网址   彭州市自助网站建设系统   偏关县建设官方网站   平安县免费建站网站   平昌县网站建设网址   平定县自助网站建设系统   屏东县建设官方网站   平度市免费建站网站   平果县网站建设网址   平和县自助网站建设系统   平湖市建设官方网站   平江县免费建站网站   平乐县网站建设网址   平凉市自助网站建设系统   平利县建设官方网站   平罗县免费建站网站   平陆县网站建设网址   屏南县自助网站建设系统   平泉市建设官方网站   屏山县免费建站网站   平顺县网站建设网址   平塘县自助网站建设系统   平潭县建设官方网站   平武县免费建站网站   萍乡市网站建设网址   平乡县自助网站建设系统   平阳县建设官方网站   平遥县免费建站网站   平阴县网站建设网址   平邑县自助网站建设系统   平远县建设官方网站   平舆县免费建站网站   皮山县网站建设网址   普安县自助网站建设系统   浦北县建设官方网站   浦城县免费建站网站   普洱市网站建设网址   普格县自助网站建设系统   浦江县建设官方网站   普兰县免费建站网站   普宁市网站建设网址   莆田市自助网站建设系统   迁安市建设官方网站   乾安县免费建站网站   潜江市网站建设网址   潜山市自助网站建设系统  

友情链接: 企业建站系统 我的家乡网页设计 html网页设计代码作 手机网页设计 手机版

Copyright © 2002-2020 自助网站建设系统_建设官方网站_免费建站网站_网站建设网址_创建公众号 版权所有 (网站地图) 备案号:粤ICP备10235580号