Pregunta

Una de las cosas que me gustaría hacer en mi aplicación basada en navegador es permitir que el usuario seleccione el texto (no en un <textarea>, simplemente ol' texto!), y tengo mi aplicación aparecerá una pequeña barra de herramientas que, a continuación, puede interactuar con el siguiente (en mi caso, añadir anotaciones).

He encontrado un montón de cosas en google que parece estar centrado en la escritura de los editores WYSIWYG, pero eso no es lo que quiero, y la mayoría de lo trabajado en IE pero no en FF2 o 3.Idealmente, me gustaría alguna función que puede devolver el texto seleccionado en la ventana del navegador que funciona en IE7 (y 6 si es posible), FireFox 2 y 3, y Safari 2.Si funciona en Opera, que sería una ventaja, pero no es un requisito.

Alguien tiene una función que hace esto?O una idea de por dónde empezar?

¿Fue útil?

Solución

Eche un vistazo a jQuery y el wrapSelection plugin.Puede ser lo que usted está buscando.

Otros consejos

Que plugin de jQuery es cool, pero se logra una tarea muy específica:envolver el texto resaltado con una etiqueta.Esto puede ser justo lo que usted desea.Pero si usted no quiere (o que están en una situación donde no puedes) agregar cualquier extraños marcado a su página, usted puede probar la solución siguiente lugar:

function getSelectedText() {
  var txt = '';

  if (window.getSelection) {
    txt = window.getSelection();
  }
  else if (document.getSelection) {
    txt = document.getSelection();
  }
  else if (document.selection) {
    txt = document.selection.createRange().text;
  }
  else return; 

  return txt;
}

Esta función devuelve un objeto que representa la selección de texto.Funciona en todos los navegadores (aunque sospecho que los objetos que devuelve será ligeramente diferente dependiendo del navegador y sólo confiable para el texto de el resultado en lugar de cualquiera de las propiedades adicionales).

Nota:Originalmente descubierto que el fragmento de código aquí: http://www.codetoad.com/javascript_get_selected_text.asp

Introducción a la Gama tiene algunos detalles sobre cómo los diferentes navegadores dan acceso a la selección de texto.

Mi experiencia es que con estos diferentes Api directamente, es bastante torpe, así que si wrapSelection funciona para usted me gustaría ir con eso.

En estos días este método debería ser suficiente:

function getSelectedText() {
    return window.getSelection ? window.getSelection().toString() : '';
}

Volverá '' en raras ocasiones, de muy vieja de los navegadores y puede ser en el caso de Opera Mini (para ser probado, sin embargo, esto puede ser obsoleto) + ver nota para UC Browser para Android.

El comportamiento individual de los navegadores con respecto a la selección es aquí descritas.

Este código funciona en Safari, IE y Firefox - espero que sea de ayuda

var str = (window.getSelection) ? window.getSelection() : document.selection.createRange();
str = str.text || str;
str = str + ''; // the best way to make object a string...
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top