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

У меня есть contenteditable 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 property = true, и нажимаю на кнопку, я всегда получаю нуль. Почему это?

Спасибо, что посмотрели.

Ответ 1

В большинстве браузеров 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(), так что этот код будет работать во всех браузерах, которые ваш исходный код делает.

Ответ 2

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

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

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

Ответ 3

2 замечания:

Тег

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

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

Надеюсь, что поможет