borrame.com - Colección particular de recortes de código y documentación para programación web

Canales RSS

Lo más fresco

  1. Cadena aleatoria en PHP Modificado
  2. Recortar texto Nuevo

Sugerencias del chef

Compartir esta página

Reemplazar selección

Modificar el contenido de una caja de texto (<textarea> o <input type="text">) no es tan trivial como parece ya que normalmente querremos preservar el contenido existente y dejar el cursor donde estaba. Esta función intenta emular el comportamiento típico de un editor de texto:

  1. Inserta el nuevo texto en la posición del cursor.
  2. Reemplaza el texto seleccionado, si lo hubiera.
  3. Deja el cursor justo al final del texto insertado.

Debería funcionar al menos en Firefox, Chrome, Opera e Internet Explorer.

/** * Inserta un texto en un control de formulario en la posición del cursor; * reemplaza la selección si la hubiera * * control: nodo <textarea> o <input type="text"> * texto: texto que se desea insertar */ function reemplazarSeleccion(control, texto){ // v2011-12-21     var inicio, seleccion;     if("selectionStart" in control){ // W3C         // Guardamos la posición inicial del cursor         inicio = control.selectionStart;         // Reemplazamos todo el contenido         control.value = control.value.substr(0, control.selectionStart) +             texto + control.value.substr(control.selectionEnd, control.value.length);         // Movemos el cursor a la posición final         control.selectionStart = inicio + texto.length;         control.selectionEnd = inicio + texto.length;                  control.focus();     }else if(document.selection){ // IE         control.focus();         // Obtenemos la selección y la reemplazamos por el nuevo texto         seleccion = document.selection.createRange();         seleccion.text = texto;         seleccion.select();     }else{         // No sabemos dónde está el cursor: insertamos el texto al final         control.value += texto;     } }

Demo

Selecciona cualquier palabra del texto y pulsa algún botón para reemplazarla.

Fallos conocidos

En Opera (versiones 11 y 12) el cursor puede quedar descolocado cuando la cadena insertada contiene retornos de carro en formato Unix.

Esta página ha sido impresa el miércoles 1 de mayo de 2024 (23:20:04 +0200) desde https://borrame.com/recortes/javascript/reemplazar-seleccion.html. La última vez que miré contenía HTML válido con CSS fresquito y si tiene flatas de ortografía ha sido sin querer.

Lorem ipsum dolor sit amet.

© 2005-2024 by Álvaro González (alvaro.es) • Burgos (España) • borrame.com