Javascript 如何使window.getselection适用于输入类型=文本字段

我有一个contenteditable div，如下所示：

<div id="test" contentEditable="true" style="width: 600px; height:300px;">Lorem ipsum dolor sit amet</div>

Lorem ipsum dolor sit amet

为此，我使用以下代码：

<input type="button" value="Click me" onclick="alert(window.getSelection().focusOffset.toString());"></button>

当我在div中移动插入符号时，单击该按钮，可以将插入符号在div中的实际位置（偏移）返回给我

问题是，当我用输入类型=文本或密码控件替换contenteditable div，并保持contenteditable属性=true，然后单击按钮时，我总是得到零。为什么会这样

---

感谢您的关注。

这在很大程度上取决于您使用的浏览器，因为这是浏览器设计的一个怪癖，而不是JavaScript

在您的情况下，当您在突出显示

的同时单击

时，

将保持突出显示状态。但是，当您在突出显示一个

或

时单击一个

时，它们会失去焦点，突出显示会被删除（从而使代码失败）

---

<>我将仔细看看你正在努力完成的事情，并考虑重新思考你是如何处理这个问题的。

在大多数浏览器中，<代码>窗口.GETScript（）>代码>只适用于文档内的文本节点和元素中的选择。它不适用于

和

元素中的文本（尽管在WebKit

窗口中。getSelection（）。toString（）

将返回聚焦文本输入或文本区域中的选定文本。请参阅）。要获取输入中的选择，请使用输入的属性：

<input type="text" id="test" value="Some text">

<input type="button" value="Click me"
    onclick="alert(document.getElementById('test').selectionEnd);">

请注意，8版之前（含8版）的IE不支持

selectionStart

和

selectionEnd

属性，并且需要。IE也不支持

window.getSelection（）

，因此此代码将在原始代码所支持的所有浏览器中工作。

2备注：

标记不是标记，应像

一样相应地关闭，否则应使用

标记（但出于X-browser合规性原因，不在a内）

如果您不想进入一个无结尾的故事，您可以重新考虑处理您的观点的方法，如下所示：保持

原样，并在其上激发DOM事件（而不是在标记上使用onclick事件）。如果你能读法语，我总结了很多例子。这种方法与第一种方法相比要重得多，但在以后的方法中会更加强大，因为您可以按照自己的意愿在DOM上启动事件，使用回调函数等等

原则如下：
一方面是HTML页面

<div id="test"...>Lorem..</div>  
<script src="..."/>  

---

希望这有帮助

有趣。我只是用input type=按钮来说明一点。例如，我可以在onkeyup事件上使用一个警报，但它仍然会给我零：（我不这么认为。我认为问题在于

window.getSelection（）

根本不适用于文本输入。此外，我注意到当我加载输入类型为text的页面时，我不会单击它（尽管它加载时包含文本），然后我点击按钮，我得到的索引是3。我不确定这是什么意思Stim，你知道我如何获得文本输入字段（文本、密码、文本区域）的插入符号位置吗？奇怪的是：是的。我发布了一个答案。甚至在我打开这个问题之前，我就知道我会在这里找到你的答案

：）

@Šime:似乎是我的专业主题：）

// 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);