3

我在 html 文档的可编辑区域中创建了内容助手的运行示例。因此，如果用户在键盘上按 ctrl 和空格键，则会出现上下文菜单。目前（参见下面的演示）上下文菜单位于右侧 y 位置（文本下方）。但它不沿着 x 轴（如果文本变长，框将被播种在行的开头）。

你能帮我解决这个问题吗？

问候，神话

示例代码：

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test</title>
<script type="text/javascript">

var iframe = null, iwindow = null, iDocument = null;

function setUpInput() {
        iframe = document.createElement( 'iframe' );
        iframe.setAttribute( 'id', 'iframe-test' );
        iframe.setAttribute( 'frameborder', 0 );
        iframe.setAttribute( 'style', 'width:100%; height:100%;border: solid 1px red;' );

        document.getElementById( "input" ).appendChild( iframe );

        iwindow   = iframe.contentWindow;
        idocument = iwindow.document;

        idocument.open();
        idocument.write("<p></p>");
        idocument.close();

        idocument.body.setAttribute( 'spellcheck', false );
        idocument.body.setAttribute( 'style', 'font-family: Consolas,serif;font-size: 0.8em;' );
        idocument.body.contentEditable = true;

        iwindow.onkeydown = function(e) {
            if (e.ctrlKey && e.keyCode == 32) {
                createSuggestObject();
                return false;
            }
            if (e.ctrlKey) return false;
        };

        iwindow.onkeypress = function(e) {if (e.ctrlKey) return false;};
}

function createSuggestObject() {
suggest = new Object();
suggest.box = document.createElement( 'div' );
suggest.box.style.position = 'absolute';
suggest.box.style.width = '120px';
suggest.box.style.overflow = 'auto';
suggest.box.style.border = '1px solid #BEC7E4';
suggest.box.style.display = 'block';
suggest.box.style.marginTop = '16px';
suggest.box.innerHTML = "Example 1";
document.body.appendChild( suggest.box )

var position = iframe.getBoundingClientRect();

var selObj = iwindow.getSelection();
var selRange = selObj.getRangeAt(0);
var p2 = selObj.anchorNode.parentNode.getBoundingClientRect();  

suggest.box.style.top = Math.round( window.scrollY + position.top + p2.top) + 'px';
suggest.box.style.left = Math.round( window.scrollX + position.left + p2.left) + 'px';

}

window.onload = function() {
    setUpInput();
};
</script>

</head>
<body>
<div id="input"></div>
</body>
</html>
4

1 回答 1

0

您的解决方案的主要问题是您使用 p 元素的边界矩形（您假设它包含用户输入的文本）作为放置建议对象的位置的参考。

首先，您没有将边界矩形宽度计入建议对象的位置，因此无论文本有多长，您的建议框都保持在左侧。

但是，这种方法最终会失败，因为如果文本有多行（第二行比第一行短），边界矩形的宽度将等于第一行的长度（或多或少）。因此，建议对象的位置将不正确。

我对如何修复代码的第一个想法是将一些内联元素附加到文本（如果您愿意的话，信标），测量它的位置，将其从 DOM 中删除并使用该计算的位置来正确设置建议对象。

结果几乎可以工作。几乎，因为事实证明，不同的浏览器使用不同的方法来处理 contentEditable 行尾。例如，Firefox<br _moz_dirty=""/>会在行尾插入，而 Chrome 则不会。因此，当我尝试在文本之后附加我的信标元素时，它被附加在之后<br/>再次导致不正确的位置。

解决方案是改变获取我们正在处理的文本节点的方式，并在它的 nextSibling 之前插入信标。

这是工作示例http://jsfiddle.net/MmKXS/10/

注意 1：我已经删除<p></p>了在 iframe 文档中添加的空元素，因为在 Chrome 中用户输入的文本没有插入其中，导致定位建议对象的另一个问题。

注意 2：目前我的解决方案仅适用于将建议对象定位在文本末尾，而不是光标位置，因为它涉及拆分 textNodes、插入信标、检查其位置并再次合并 textNodes。根据您对可能导致性能不佳和/或可能需要更改如何处理建议对象定位的整个方法的代码的用例。

于 2011-11-08T09:19:27.900 回答