个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我在 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>
最佳答案
您的解决方案的主要问题是您使用 p 元素的边界矩形(您假设它包含用户输入的文本)作为放置建议对象的位置的引用。
首先，您没有将边界矩形宽度考虑到建议对象的位置，因此无论文本有多长，您的建议框都位于左侧。
但是，这种方法最终会失败，因为如果文本有多于一行(其中第二行比第一行短)，则边界矩形的宽度将等于第一行的长度(或多或少) )。因此，建议对象的位置将不正确。
我关于如何修复代码的第一个想法是将一些内联元素附加到文本(信标，如果你愿意的话)，测量它的位置，将其从 DOM 中删除并使用计算出的位置正确设置建议对象。
结果几乎成功了。几乎，因为事实证明，不同的浏览器使用 dealing with contentEditable line endings 的不同方法。例如，Firefox 插入 <br _moz_dirty=""/>位于行尾，而 Chrome 则没有。因此，当我尝试在文本后面附加我的 beacon 元素时，它会附加在 <br/> 之后。再次导致位置错误。
解决方案是更改获取我们正在处理的文本节点的方式，并在其 nextSibling 之前插入信标。
这是工作示例 http://jsfiddle.net/MmKXS/10/
注释 1:我已删除添加空 <p></p>元素添加到 iframe 文档中，因为在 Chrome 中，用户输入的文本未插入其中，导致定位建议对象时出现另一个问题。
注 2:目前我的解决方案仅适用于将建议对象定位在文本末尾，不适用于光标位置，因为它涉及拆分文本节点、插入信标、检查其位置并再次合并文本节点。根据该代码的用例，可能会导致性能不佳和/或可能需要更改处理建议对象定位的整个方法。
关于javascript - 使用 Javascript 和可编辑文档创建内容助手 (ctrl+space)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8029920/
25
4
0
有时我需要(为了让我的开发更快)在我的代码中对一些东西进行硬编码。这可能是凭据，或者可能只是一个允许我测试某些功能的 hack。由于很多原因，我从来不想将这段代码推送到主代码库甚至开发分支。一段时间以
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 2 年前。 Improve this qu
我经常发现自己从类中提取常见行为到只包含一组静态方法的帮助程序/实用程序类中。我经常想知道是否应该将这些类声明为抽象类，因为我真的想不出实例化这些类的正当理由？ 将这样的类声明为抽象类的优点和缺点是什
如果我这样做: $obj = factory(Object::class)->make(); collect($obj); 我返回了一个类型的集合: Illuminate\Support\Collec
我有一个应用程序，我可以在其中列出 parent 和 child 。当我添加一个 child 时，我需要获得一个 parent 列表作为下拉列表显示。有没有类似 collection_select 的
我有渲染组件( source )，用于从 Controller 字段渲染组件/助手。它适用于 ember 1.9.1，但在更新到 ember 1.12.1 后，我发现 API 发生了变化。之后upda
我刚开始使用 Rails，还有很多东西需要学习，所以我可能会比平常更频繁地在 Stackoverflow 上询问初学者 Rails/Ruby 问题。 我只是想弄清楚 Helpers 在 Rails 中
我在 Web 上使用 VS Express 2012。我的项目是一个 MVC 4 项目。 我正在尝试创建一个助手来创建一个菜单项，该菜单项是带有标签的 png 图像。我几乎剪切并粘贴了这段代码: Ac
我正在尝试在我的 Vue 页面中映射我商店的状态变量: export default { data: () => ({ localData: []
我目前正在开发一个 Rails 插件，用于生成 iPhone 特定的 HTML 元标记。我尝试使用 ActionView::TestCase 进行单元测试，但不断收到相同的错误。请参阅下面的文件内容和
我正在努力解决一个与变量声明相关的非常基本的问题。我已经阅读了有关变量的所有内容，但我不知道我的问题是否与 1) 我如何声明变量或 2) 我如何设置变量的范围有关。 首先，我对 Meteor 中变量的
我想知道是否可以将参数传递给 Meteor Helper 并在 HTML 中插入返回对象的属性，而不仅仅是返回最终值。我有这样的东西: HTML: {{#each conversation}}
我正在尝试为我的 Ember 应用程序构建一个新的条件助手。值得一提的是，我正在使用使用 Handlebars 2.0 的 Ember 1.10.1，并且我无法升级它，如果能很好地解决这个版本的 Em
我最近从 Dreamweaver 迁移到 aptana，并尝试使 aptana 尽可能相似；) 已经做了很多更改，但我仍然找不到使代码字体变小的方法(在 Dreamweaver 中代码更清晰，因为字体
我有以下模板: {{#each helperOne "1" "2" }} Lorem upsom {{#each}} helper : template.tempName.h
我有这个简单的代码块，它位于我的一个模板上，但我想将其作为助手放置，以便我的所有 View 都可以访问它。 @hidden(field: Field) = { @defining(field)
使用正则表达式，我正在替换 **text in bold**至 text in bold在一个字符串中，然后显示 message使用 {{{message}}}在我的 EmberJS 模板上。问题是我
是否有任何非常有用和健壮的 C++ 网络库？和库来帮助他们更好地运行？诸如使用 << 时自动进行字节序转换之类的东西，阻止读取直到结构或 w/e 您的读取完全传输，有助于调试协议(protocol)的
模板 {{#each tags}} {{#isObject this}} Object {{else}}
我有返回 JSON 的函数: Template.mainmenu.menuitem = function() { var jsonObj = { items: [ { ur
我是一名优秀的程序员,十分优秀！