Question

当用户按下CTRL + Home时，我会尝试让每个浏览器将插入位置移动到第一段的开头。

让我们假设整个页面都是可编辑的，除了手头的直接目标外，我们不会考虑任何其他内容。

这在Firefox，Safari和IE 10中运行良好，但Opera 12拒绝服从。这是代码......

var s = window.getSelection();

if (e.ctrlKey && e.keyCode==36)
{
 var p0 = document.getElementsByTagName('p')[0];

 if (p0.firstChild.nodeName.toLowerCase()=='#text')
 {//<p>text
  var p = p0.firstChild;
 }
 else if (p0.firstChild.firstChild.nodeName.toLowerCase()=='#text')
 {//<p><em>text
  var p = p0.firstChild.firstChild;
 }

 if (typeof p=='object')
 {
  s.getRangeAt(0).setStart(p,0);
  s.getRangeAt(0).setEnd(p,0);
  s.collapseToStart();
 }
}

Answer 1

此问题是由Opera中段落的CSS边距引起的。为什么？我完全不知道，只是这个最小的测试用例重现了它。

解决方法是主观的，边距和填充具有不同的用途，在我的情况下，我无法利用填充代替边距，因此让我依赖Opera修复此错误。

<强> example.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Opera Contenteditable margin CTRL+Home/End Bug</title>
<style type="text/css">
p
{
 /*margin: 0px 20px 14px 24px;*/
 margin-top: 0px;
 margin-right: 20px;
 margin-bottom: 14px;
 margin-left: 24px;
}
</style>
</head>

<body>

<div contenteditable="true">
<p>Paragraph one.</p>
<p>Paragraph two.</p>
</div>

</body>
</html>

JavaScript：将插入位置设置为第一段的开头（Opera bug）

1 个答案: