Cómo obtener texto seleccionado de un control de cuadro de texto con JavaScript

⏰ 7 minutos de lectura

avatar de usuario
mavera

Tengo un cuadro de texto y un botón de enlace. Cuando escribo algún texto, selecciono algo y luego hago clic en el botón de enlace, el texto seleccionado del cuadro de texto debe mostrarse con un cuadro de mensaje.

¿Cómo puedo hacerlo?

Cuando hago clic en el botón Enviar para el cuadro de texto a continuación, el cuadro de mensaje debe mostrar lorem ipsum. Porque “Lorem ipsum” está seleccionado en el área.

Si selecciono cualquier texto de la página y hago clic en el botón Enviar, funciona, pero si escribo un texto en el cuadro de texto y lo hago, no funciona. Porque cuando hago clic en otro espacio, la selección del cuadro de texto se cancela.

Ahora el problema es que, cuando selecciono texto del cuadro de texto y hago clic en cualquier otro control o espacio, el texto que está seleccionado aún debe estar seleccionado.

¿Como se hace?

avatar de usuario
Filho

OK, aquí está el código que tengo:

function ShowSelection()
{
  var textComponent = document.getElementById('Editor');
  var selectedText;

  if (textComponent.selectionStart !== undefined)
  { // Standards-compliant version
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos);
  }
  else if (document.selection !== undefined)
  { // Internet Explorer version
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }

  alert("You selected: " + selectedText);
}

El problema es que, aunque el código que doy para Internet Explorer está en muchos sitios, no puedo hacer que funcione en mi copia de explorador de Internet 6 en mi sistema actual. Tal vez te funcione, y por eso te lo doy.

El truco que busca es probablemente la llamada .focus() para devolver el foco al área de texto, por lo que la selección se reactiva.

Obtuve el resultado correcto (el contenido de la selección) con el onKeyDown evento:

document.onkeydown = function (e) { ShowSelection(); }

Entonces el código es correcto. Nuevamente, el problema es obtener la selección al hacer clic en un botón… Continúo buscando.

No tuve ningún éxito con un botón dibujado con un li etiqueta, porque cuando hacemos clic en ella, Internet Explorer deselecciona la selección anterior. El código anterior funciona con un simple input botón, sin embargo…

  • Publicación de hace 8 años, lo sé. Pero de todos modos… tal vez podría haberlo intentado: en su botón, haga clic en llamar $(‘‘).focus(), y luego llame a ShowSelection() que obtiene la parte del elemento activo.

    – Krishnan

    21 de mayo de 2014 a las 9:10

  • Esto se puede hacer mucho más simple.

    – Dan Dascalescu

    4 sep 2015 a las 11:38

avatar de usuario
Dan Dascalescu

Aquí hay una solución mucho más simple, basada en el hecho de que la selección de texto ocurre al subir el mouse, por lo que agregamos un detector de eventos para eso:

document.querySelector('textarea').addEventListener('mouseup', function () {
  window.mySelection = this.value.substring(this.selectionStart, this.selectionEnd)
  // window.getSelection().toString();
});
<textarea>
  Select some text
</textarea>
<a href="#" onclick=alert(mySelection);>Click here to display the selected text</a>

Esto funciona en todos los navegadores.

Si también desea manejar la selección a través del teclado, agregue otro detector de eventos para keyupcon el mismo código.

Si no fuera por este error de Firefox presentado en 2001 (sí, hace 14 años), podríamos reemplazar el valor asignado a window.mySelection con window.getSelection().toString()que funciona en IE9+ y todos los navegadores modernos, y también obtiene la selección realizada en partes del DOM que no son áreas de texto.

  • Así que criticas las soluciones dadas hace siete años, sin indicar que no funcionarán en IE < 9*... :-) Está bien, es bueno actualizar el tema con una solución moderna, pero no olvides que algunas personas se preocupan por las personas mayores. navegadores * developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

    – Filho

    04/09/2015 a las 14:11

  • @PhiLho: Es alucinante que no funcione en FF: el error se presentó hace 14 años. Respuesta actualizada.

    – Dan Dascalescu

    5 sep 2015 a las 19:30

  • Esta solución funciona bien, sin embargo, si el cursor sale del ‘cuadro’ del área de texto, el evento no se activará. Debe agregar el siguiente código para que funcione en ese caso: document.querySelector(‘textarea’).addEventListener(‘mouseleave’, function () { window.mySelection = this.value.substring(this.selectionStart, this.selectionEnd ); }); El evento también se activará cuando abandone el área de texto, manteniendo así su selección.

    – Darxtar

    9 de octubre de 2016 a las 0:15

  • ¿Ratón? ¿Funciona si se usa el teclado para la selección? ¿Puedes abordar eso en tu respuesta?

    -Peter Mortensen

    el dia de ayer

avatar de usuario
prat3ik-patel

function disp() {
  var text = document.getElementById("text");
  var t = text.value.substr(text.selectionStart, text.selectionEnd - text.selectionStart);
  alert
}
<TEXTAREA id="text">Hello, How are You?</TEXTAREA><BR>
<INPUT type="button" onclick="disp()" value="Select text and click here" />

  • Esto sucede que funciona, pero si tuviera un código más complicado en disp()en el momento en que el código obtuvo la selección del área de texto (por ejemplo, la construcción de un menú de selecciónel navegador podría haberlo borrado porque el click evento que ocurre en el botón significa que el área de texto recibe un difuminar evento, que borra la selección. Mi respuesta aborda eso al guardar la selección en una variable cuando ocurre.

    – Dan Dascalescu

    5 sep 2015 a las 19:49

avatar de usuario
sombra2531

Para Opera, Firefox y Safari, puede utilizar la siguiente función:

function getTextFieldSelection(textField) {
    return textField.value.substring(textField.selectionStart, textField.selectionEnd);
}

Luego, simplemente pasa una referencia a un elemento de campo de texto (como un área de texto o un elemento de entrada) a la función:

alert(getTextFieldSelection(document.getElementsByTagName("textarea")[0]));

O, si desea que