首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >对window.getSelection() api感到困惑

对window.getSelection() api感到困惑
EN

Stack Overflow用户
提问于 2016-12-12 19:13:57
回答 1查看 559关注 0票数 0

我使用一个带有html5 contenteditable="true“属性的div来将其用作编辑器。我使用window.getSelection()接口在插入符号位置插入单词。

但它在IE11中的表现有所不同。

页面加载后,当我在chrome控制台中输入window.getSelection()时,它返回body元素。

同样的事情在IE-11控制台返回文本节点,由于在插入符号位置插入文本不能正常工作。

下面是pasteTextAtCaret()函数的代码

代码语言:javascript
运行
AI代码解释
复制
var ele = $(".editor");
function pasteHtmlAtCaret(html) {
                    if(!ele.is(':focus')) {ele.focus();}
                    var sel, range;
                    if (window.getSelection) {
                        // IE9 and non-IE
                        sel = window.getSelection();
                        if (sel.getRangeAt && sel.rangeCount) {
                            range = sel.getRangeAt(0);
                            range.deleteContents();

                            // Range.createContextualFragment() would be useful here but is
                            // non-standard and not supported in all browsers (IE9, for one)
                            var el = document.createElement("div");
                            el.innerHTML = html;
                            var frag = document.createDocumentFragment(), node, lastNode;
                            while ((node = el.firstChild)) {
                                lastNode = frag.appendChild(node);
                            }
                            range.insertNode(frag);

                            // Preserve the selection
                            if (lastNode) {
                                range = range.cloneRange();
                                range.setStartAfter(lastNode);
                                range.collapse(true);
                                sel.removeAllRanges();
                                sel.addRange(range);
                            }
                        }
                    } else if (document.selection && document.selection.type !== "Control") {
                        // IE < 9
                        document.selection.createRange().pasteHTML(html);
                    }
                }

我错过了什么吗?

EN

回答 1

Stack Overflow用户

发布于 2016-12-13 06:27:22

最后,我发现在我的css中,我对编辑器使用了下面的属性,正是这个属性导致了这个问题。

代码语言:javascript
运行
AI代码解释
复制
-ms-user-select: none
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41107898

复制
相关文章
为什么选择使用 TypeScript ?
相信经常关注前端技术的同学对 TypeScript 应该不陌生,或多或少看过一些关于 TypeScript 的文章。
陈皮皮
2020/07/10
2.4K0
链表----在链表中添加元素详解
1.2对于链表来说,若想访问链表中每个节点则需要把链表的头存起来,假如链表的头节点为head,指向链表中第一个节点,如图:
wfaceboss
2019/04/08
2.9K0
链表----在链表中添加元素详解
python添加列表元素使用什么方法
列表是储存元素的数据类型,既然能存储元素,那么就类似数据库一样,增删改查的一些功能就不能少了。下面我们就来先看看列表的增加数据方法有哪些。
python自学网
2021/12/01
1.6K0
python添加列表元素使用什么方法
jQuery - 添加元素
jQuery append() 方法在被选元素的结尾插入内容(仍然在该元素的内部)。
陈不成i
2021/07/22
2.8K0
为什么选择 TypeScript
相信经常关注前端技术的同学对 TypeScript 应该不陌生,或多或少看过一些关于 TypeScript 的文章。
陈皮皮
2020/06/28
1.7K0
【说站】python使用insert添加列表元素
1、index表示指定位置的索引值,insert()将p_object插入listname列表第index要素的位置。
很酷的站长
2022/11/23
9270
【说站】python使用insert添加列表元素
使用 CSS 伪元素需要注意的
若不设置,则伪元素不会显示。如果不想设置 content 的内容,可以将内容设置为空。如:
前端GoGoGo
2018/08/27
9830
使用CSS选择器进行元素定位
在selenium webdriver中,支持使用CSS选择器来进行元素定位,事实在真的投入工作,大量编辑用例和元素定位的时候,使用css 和 xpath才是经常需要用到的。 之前有专门讲过使用xpath对元素定位的使用,下面要介绍css选择器来进行元素定位。 【参见W3C官网说明】 http://www.w3school.com.cn/cssref/css_selectors.asp 先看看css选择器定位的webdriver函数: def find_elements_by_css_selector(
苦叶子
2018/04/17
3.2K0
javascript动态添加元素
<!doctype html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”Generator” content=”EditPlus®”> <meta name=”Author” content=””> <meta name=”Keywords” content=””> <meta name=”Description” content=””> <title>Document</title> </head> <body> <script> function addLiElement() { var liElement = document.createElement(‘li’); //liElement.innerHTML = ‘这是新增的li元素’; var labelElement = document.createElement(‘label’); var inputElement = document.createElement(‘input’); labelElement.innerHTML = ‘单号:’ inputElement.setAttribute(‘name’, ‘expressNumber’); liElement.appendChild(labelElement); liElement.appendChild(inputElement); var ulElement = document.getElementById(‘myid’); ulElement.appendChild(liElement); } </script> <ul id=”myid”> <li>aa</li> <li>bb</li> </ul> <p> <button onClick=”addLiElement();”>动态添加标签</button> </p> </body> </html>
全栈程序员站长
2022/06/25
2K0
javascript 如何添加元素
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/152086.html原文链接:https://javaforall.cn
全栈程序员站长
2022/06/25
1.1K0
原生js添加元素
今天做页面使用的mui,因为使用mui情况下无法使用jquery,于是在ajax请求完毕添加元素的时候发现自己竟然对原生js添加元素的方法有点模糊了,真是越活越倒退了,赶紧整理一波。
全栈程序员站长
2022/06/25
9.3K0
vue 数组添加元素
3、splice() 方法向/从数组指定位置添加/删除项目,然后返回被删除的项目。
wust小吴
2019/11/05
5.4K0
html页面添加元素
Title table,td,th{ border: 1px solid slateblue ; } div{ vertical-align: center; text-align: center; } $(function (){ var $delete=function (){ var $parent = $(this).parent().parent();
await
2021/09/23
6.6K0
js 动态添加元素
该例子的样式用的是easyui的样式,看不懂只需把class="easyui-XXX" 删除即可 <div class="fitem" id="urls" style="margin-bottom:5px;"> <label>url:</label> <input id="url" name="url" class="easyui-textbox" style="width: 260px" > 小标题: <input id="url_title" name="url_titl
黄啊码
2020/05/29
20.2K0
js 动态添加元素
js添加元素方法
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/152064.html原文链接:https://javaforall.cn
全栈程序员站长
2022/06/25
8.8K0
leetcode哈希表之前K个高频元素
这里先借助HashMap来统计元素出现的频次,然后再借助PriorityQueue来维护topK的元素,最后取出来topK元素转换为数组。
code4it
2020/11/02
4270
leetcode哈希表之前K个高频元素
这里先借助HashMap来统计元素出现的频次,然后再借助PriorityQueue来维护topK的元素,最后取出来topK元素转换为数组。
code4it
2020/10/12
4650
leetcode哈希表之前K个高频元素
LeetCode 1785. 构成特定和需要添加的最少元素(贪心)
给你一个整数数组 nums ,和两个整数 limit 与 goal 。 数组 nums 有一条重要属性:abs(nums[i]) <= limit 。
Michael阿明
2021/09/06
5190
点击加载更多

相似问题

使用jq在nth元素之前选择元素。

20

为什么在使用“插入之前()”时需要引用元素的父元素?

10

在文本选择之前/之后添加元素

25

在某些元素之前添加元素

30

在元素之前选择同级

114
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档