Seleccionar, copiar y pegar

Los navegadores tiene sus limitaciones. Unos unas, otros, otras ... nada es perfecto.

Firefox, Safari y Opera permiten que manipulemos la selección de textos con CSS, es decir, cambiar el color que, por defecto es gris.

Es un detalle que puede modificarse con dos pseudo-elementos llamados ::-moz-selection y ::selection que admiten solamente dos propiedades: color y background-color. Por ejemplo:

::-moz-selection {background-color: DarkRed; color: yellow;}
::selection {background-color: DarkRed; color: yellow;}

Mostrará las selecciones con fondo rojos y textos de color amarillo y usamos dos definiciones porque una será interpretada por Firefox y la otra por Opera y Safari.

Podemos generar ese efecto en toda la página o sólo en alguna aprte, de la misma manera que lo hacemos con cualquier otra definición de CSS:

UN EJEMPLO
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

/* esto se aplicará sólo a los párrafos */
p::-moz-selection {color: yellow; background-color: DarkRed;}
p::selection {color: yellow; background-color: DarkRed;}

/* esto se aplicará sólo a la clase demo */
.demo::-moz-selection {color: yellow; background-color: DarkRed;}
.demo::selection {color: yellow; background-color: DarkRed;}

/* esto se aplicará sólo al DIV demo */
div#demo::-moz-selection {color: yellow; background-color: DarkRed;}
div#demo::selection {color: yellow; background-color: DarkRed;}

En cualquier navegador, seleccionar todo el contenido de un área de texto (textarea) es bastante sencillo. Hay un artículo muy completo sobre este tema en el blog de Gem@

basta agregar un evento onclick en el formulario:

<form>
  <textarea onclick="javascript:this.focus();this.select();"> ... el contenido ... </textarea>
</form>

De modo similar, podemos hacerlo agregando un botón:

<form>
  <textarea name="selboton"> ... el contenido ... </textarea>
  <input value="Seleccionar Todo" onclick="javascript:this.form.selboton.focus();this.form.selboton.select();" type="button" />
</form>

Y sí, al contrario de los pseudo-elementos de selección, esto funcionará en todos los navegadores pero decía que nada es perfecto y el tema de seleccionar y copiar es uno de esos detalles donde en Internet Explorer las cosas se hacen fáciles pero en Firefox son muy engorrosas o incluso, imposibles.

Estas tres funciones permiten copiar, cortar y pegar textos seleccionados en Internet Explorer:

<script>

function CopyToClipboard(){
  CopiedTxt = document.selection.createRange();
  CopiedTxt.execCommand("Copy");
}

function PasteFromClipboard(){
  document.nombreformulario.nombretextarea.focus();
  PastedText = document.nombreformulario.nombretextarea.createTextRange();
  PastedText.execCommand("Paste");
}

function CutToClipboard(){
  CutTxt = document.selection.createRange();
  CutTxt.execCommand("Cut");
}

</script>

Y aunque también Internet Explorer tiene restricciones de seguridad que no hacen que las cosas funcionen así como así, se puede habilitar con un simple click:

No es el único método, este otro script de DynamicDrive también permite seleccionar y copiar al portapapeles. Hay muchos más pero siempre funcionarán en IE y no en Firefox. Para este último hay varios trucos que implican el uso de archivos SWF pero son "dudosos". De todos ellos, el único que parece funcionar es una librería llamada Zero Clipboard.

Es verdad que esa restricción podemos cambiarla en nuestro navegador; para eso debemos editar la configuración entrando en about:config y buscando esto:

signed.applets.codebase_principal_support

Donde el valor establecido por defecto es false y haciendo doble click en la línea lo permutamos por true (más información)

Para mi gusto, todas esas opciones son demasiado engorrosas y por lo tanto, creo que es mejor seguir recurriendo al viejo CTRL+C.

ElHackerZ