JavaScript:将插入符号位置设置为第一段的开头(Opera bug）

JavaScript: set caret position to begining of first paragraph (Opera bug)

本文关键字：一段 bug Opera 开头 插入 符号 位置 设置 JavaScript      更新时间：2023-09-26

当用户按 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();
 }
}

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

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

示例.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>
相关文章：