Как заставить window.getselection работать с типом ввода = текстовое поле

В большинстве браузеров window.getSelection() работает только с выделением в текстовых узлах и элементах в документе. Это не применяется к тексту в элементах <input> и <textarea> (хотя в WebKit window.getSelection().toString() вернет выбранный текст в выделенном текстовом поле ввода или текстовой области. См. http://jsfiddle.net/PUdaS/). Чтобы получить выбор внутри ввода, используйте его свойства selectionStart и selectionEnd:

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

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

Обратите внимание, что IE до версии 8 включительно не поддерживает свойства selectionStart и selectionEnd и требуется другое, более сложное решение. IE также не поддерживает window.getSelection(), поэтому этот код будет работать во всех браузерах, которые поддерживает исходный код.

Это во многом будет зависеть от используемого вами браузера, так как это особенность дизайна браузера, а не JavaScript.

В вашем случае происходит следующее: когда вы нажимаете <input type="button"> при выделенном <div>, <div> остается выделенным. Однако, когда вы щелкаете <input type="button"> при выделенном <input type="text"> или <textarea>, они теряют фокус, а выделение удаляется (что приводит к сбою кода).

Я бы более внимательно посмотрел на то, что вы пытаетесь достичь, и подумал бы о том, чтобы переосмыслить, как вы подходите к этой проблеме.

2 примечания:

Тег <input... > не является тегом и должен быть соответственно закрыт, как <input ... />, в противном случае вы должны использовать тег <button> (но не внутри тега для X-браузера причины соответствия)

Если вы не хотите ввязываться в нескончаемую историю, вы можете пересмотреть способ обработки своей точки зрения следующим образом: оставьте свой <div> как есть и запустите событие DOM на этом (вместо используя событие onclick в теге). Если вы умеете читать по-французски, я собрал множество примеров здесь. Этот способ значительно тяжелее, чем ваш первый способ, но гораздо более мощный впоследствии, поскольку вы можете запускать события в 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);  

надеюсь, это поможет