我有一个内容可编辑的 div，如下所示：
<div id="test" contentEditable="true" style="width: 600px; height:300px;">Lorem ipsum dolor sit amet</div>
我使用以下代码：
<input type="button" value="Click me" onclick="alert(window.getSelection().focusOffset.toString());"></button>
当我在 div 中移动插入符号时单击该按钮，返回给我插入符号在 div 中的实际位置（偏移量）。
问题是当我用输入类型=文本或密码控件替换 contenteditable div，并保持 contenteditable 属性=true，然后单击按钮时，我总是得到一个零。这是为什么呢？
感谢收看。
【问题讨论】：
标签： javascript html contenteditable caret
在大多数浏览器中，window.getSelection() 仅适用于文本节点内的选择和文档内的元素。它不适用于<input> 和<textarea> 元素中的文本（尽管在WebKit 中window.getSelection().toString() 将在焦点文本输入或文本区域中返回选定的文本。参见http://jsfiddle.net/PUdaS/）。要在输入中获取选择，请使用输入的 selectionStart and selectionEnd 属性：
<input type="text" id="test" value="Some text">
<input type="button" value="Click me"
onclick="alert(document.getElementById('test').selectionEnd);">
请注意，IE 版本 8（包括版本 8）不支持 selectionStart 和 selectionEnd 属性，并且需要 different, more complicated solution。 IE 也不支持window.getSelection()，所以这段代码可以在你的原始代码支持的所有浏览器中运行。
【讨论】：
:)
这在很大程度上取决于您使用的浏览器，因为这是浏览器设计的一个怪癖，而不是 JavaScript。
在您的情况下，当您在突出显示 <div> 的同时单击 <input type="button"> 时，<div> 仍然突出显示。但是，当您在突出显示 <input type="text"> 或 <textarea> 的同时单击 <input type="button"> 时，它们会失去焦点并移除突出显示（从而使您的代码失败）。
我会仔细研究您要完成的工作，并考虑重新考虑您是如何解决这个问题的。
【讨论】：
window.getSelection() 根本不适用于文本输入。
2 备注：
<input... > 标签不是标签，应该像 <input ... /> 一样关闭，否则你应该使用 <button> 标签（但不是出于 X 浏览器合规性的原因）
如果你不想进入一个没有结局的故事，你可以重新考虑处理你的观点的方法如下：保持你的 <div> 原样并启动一个 DOM 事件在那（而不是在标签上使用 onclick 事件）。如果你会读法语，我总结了很多例子here。这种方式比你的第一种方式要重得多，但之后更强大，因为你可以在 DOM 上按你想要的方式触发事件，使用回调函数等等..
原理如下：
一方面是 HTML 页面
<div id="test"...>Lorem..</div>
<script src="..."/>
另一方面，非侵入式 javascript 代码
// your event handler here
function Dothisorthat(e) {
// pop up the dom content or edit it or start an ajax request or whatever you need here
return false;
}
// This is read in the third place
function attacherAction() {
// Attach the action "Dothisorthat" on the event "onclick" occuring on your div "test"
id ='test'; // your div id
if (document.getElementById(id)) {
zLink = document.getElementById(id);
zLink.onclick = function() {
Dothisorthat(this); // in your case, you can write a small function to pop up or edit the div content
}
}
}
// This is read second
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
// This is read first
addLoadEvent(attacherAction);
希望有帮助
【讨论】：