gpt4 book ai didi

javascript - IE TextRange 选择方法无法正常工作

转载 作者:数据小太阳 更新时间:2023-10-29 04:31:40 25 4
gpt4 key购买 nike

我在使用 contentEditable 设置为 true 的 IE 文档时遇到异常问题。在位于 block 元素之前的文本节点末尾的范围上调用 select() 会导致选择向右移动一个字符并出现在不应出现的位置。我已经向 Microsoft 提交了针对 IE8 的错误。如果可以,请为这个问题投票,以便它得到修复。

https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=390995

我写了一个测试用例来演示效果:

<html>
<body>
<iframe id="editable">
<html>
<body>
<div id="test">
Click to the right of this line -&gt;
<p id="par">Block Element</p>
</div>
</body>
</html>
</iframe>
<input id="mytrigger" type="button" value="Then Click here to Save and Restore" />
<script type="text/javascript">
window.onload = function() {
var iframe = document.getElementById('editable');
var doc = iframe.contentDocument || iframe.contentWindow.document;

// An IFRAME without a source points to a blank document. Here we'll
// copy the content we stored in between the IFRAME tags into that
// document. It's a hack to allow us to use only one HTML file for this
// test.
doc.body.innerHTML = iframe.textContent || iframe.innerHTML;

// Marke the IFRAME as an editable document
if (doc.body.contentEditable) {
doc.body.contentEditable = true;
} else {
var mydoc = doc;
doc.designMode = 'On';
}

// A function to demonstrate the bug.
var myhandler = function() {
// Step 1 Get the current selection
var selection = doc.selection || iframe.contentWindow.getSelection();
var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);

// Step 2 Restore the selection
if (range.select) {
range.select();
} else {
selection.removeAllRanges();
selection.addRange(range);
doc.body.focus();
}
}

// Set up the button to perform the test code.
var button = document.getElementById('mytrigger');
if (button.addEventListener) {
button.addEventListener('click', myhandler, false);
} else {
button.attachEvent('onclick', myhandler);
}
}
</script>
</body>
</html>

问题暴露在myhandler函数中。这就是我所做的一切,在保存和恢复选择之间没有第 3 步,但光标移动了。它似乎不会发生,除非选择为空(即我有一个闪烁的光标,但没有文本),并且它似乎只在光标位于 block 节点之前的文本节点的末尾时发生。

看起来范围仍然在正确的位置(如果我在范围上调用 parentElement 它返回 div),但是如果我从当前选择中得到一个新范围,新范围在段落标记内,并且那是它的父元素。

我如何解决这个问题并在 Internet Explorer 中始终保存和恢复选择?

最佳答案

我已经想出一些方法来处理这样的 IE 范围。

如果只想保存光标所在位置,然后恢复,可以使用pasteHTML方法在光标当前位置插入一个空的span,然后使用moveToElementText方法放回去再次在那个位置:

// Save position of cursor
range.pasteHTML('<span id="caret"></span>')

...

// Create new cursor and put it in the old position
var caretSpan = iframe.contentWindow.document.getElementById("caret");
var selection = iframe.contentWindow.document.selection;
newRange = selection.createRange();
newRange.moveToElementText(caretSpan);

或者,您可以计算当前光标位置之前的字符数并保存该数字:

var selection = iframe.contentWindow.document.selection;
var range = selection.createRange().duplicate();
range.moveStart('sentence', -1000000);
var cursorPosition = range.text.length;

要恢复光标,将其设置到开头,然后将其移动该字符数:

var newRange = selection.createRange();
newRange.move('sentence', -1000000);
newRange.move('character', cursorPosition);

希望这对您有所帮助。

关于javascript - IE TextRange 选择方法无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/130186/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com