¿Cómo puedo hacer que window.getselection funcione para un tipo de entrada = campo de texto

Tengo una div contenteditable, así:

Lorem ipsum dolor sit amet

para lo cual utilizo el siguiente código:

  

Al hacer clic en el botón cuando muevo el cursor alrededor del div, me devuelve la posición real (desplazamiento) del cursor dentro del div.

El problema es cuando reemplazo el div contenteditable por un tipo de entrada = texto o control de contraseña, y mantengo la propiedad content = true y hago clic en el botón, siempre obtengo un cero. ¿Por qué es esto?

Gracias por mirar.

En la mayoría de los navegadores, window.getSelection() solo funciona con selecciones dentro de nodos de texto y elementos dentro del documento. No se aplica al texto dentro de los elementos y (aunque en WebKit window.getSelection().toString() devolverá el texto seleccionado dentro de una entrada de texto enfocado o un área de texto. Consulte http://jsfiddle.net / PUdaS / ). Para obtener la selección dentro de una entrada, use las propiedades selectionStart y selectionEnd la entrada:

   

Tenga en cuenta que IE hasta e incluyendo la versión 8 no admite las propiedades selectionStart y selectionEnd , y se requiere una solución diferente y más complicada . IE tampoco es compatible con window.getSelection() , por lo que este código funcionará en todos los navegadores que tenga su código original.

Esto dependerá en gran medida del navegador que esté utilizando, ya que esto es una peculiaridad del diseño del navegador y no de JavaScript.

Lo que sucede en su caso es cuando hace clic en mientras tiene un

resaltado, el

permanece resaltado. Sin embargo, cuando hace clic en mientras tiene resaltado un o , pierden el foco y el resaltado se elimina (lo que hace que su código falle).

Vería más de cerca lo que está tratando de lograr y consideraría repensar cómo se está acercando a este problema.

2 observaciones:

etiqueta no es una etiqueta y debe cerrarse como contrario debe usar la etiqueta (pero no dentro de a para las razones de cumplimiento con X-browser)

Si no desea ingresar en una historia no final, puede reconsiderar la forma de manejar su punto de la siguiente manera: mantenga su

tal como está y active un evento DOM en eso (en lugar de usar el evento onclick en la etiqueta). Si puedes leer francés, he resumido muchos ejemplos aquí . De esta manera, es mucho más pesado que antes, pero mucho más poderoso después, ya que puede activar eventos como desee en el DOM, usar funciones de callback, etc.

El principio es el siguiente:
Página HTML por un lado

 
Lorem..

Código javascript no intrusivo por otro lado

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

Espero que ayude