Bienvenidos sean a este post, hoy hablaremos sobre uno de los eventos mas interesantes que podemos utilizar, tambien pueden ser importante pero no dejar ser interesante como es el evento de seleccion de texto.
Este evento unicamente verifica si selecciono o no un texto y despues podemos derivarlo a una funcion o metodo para devolver una respuesta, para entenderlo un poco mejor veamos el siguiente ejemplo:
<html>
<head>
<title>Pagina de prueba de onSelect</title>
<script language="Javascript">
function seleccion()
{
var texto=document.getElementById("texto");
var inicio=texto.selectionStart;
var final=texto.selectionEnd;
var sel=texto.value.substring(inicio,final);
alert("Texto seleccionado:\n" + sel);
}
</script>
</head>
<body>
<textarea id="texto" cols="70" rows="10" readonly="yes" onSelect="seleccion()">
Este es un texto de Prueba donde probaremos como funciona la seleccion.
No notaremos nada raro, salvo la posibilidad de no poder modificar el texto contenido aca.
</textarea>
</body>
</html>Analicemos primero el codigo HTML donde tendremos un solo elemento que es un TEXTAREA y este tendra la sentencia onSelect para llamar a una funcion que se llama seleccion, el texto puede ser modificado puse este como un simple ejemplo y la particularidad de este elemento va a ser que usamos la propiedad readonly como yes para poder hacer a este elemento de solo lectura y no poder ser modificado, veamos a continuacion la funcion seleccion:
function seleccion()
{
var texto=document.getElementById("texto");
var inicio=texto.selectionStart;
var final=texto.selectionEnd;
var sel=texto.value.substring(inicio,final);
alert("Texto seleccionado:\n" + sel);
}Primero crearemos un objeto llamado texto donde por medio de getElementById lo enlazaremos al TEXTAREA llamado texto, luego tendremos una variable llamada inicio donde le asignaremos el valor inicial de nuestra seleccion en texto por medio de selectionStart y crearemos otra variable llamada final donde le asignaremos el valor final de la seleccion por medio de selectionEnd, nuestro siguiente y ultima variable sera una llamada sel donde usaremos un substring con el valor inicial indicado por inicio y un valor final suministrado por final y a su vez lo usaremos sobre el texto contenido en la propiedad value del objeto texto, para finalmente mostrar ese texto por medio de un alert, grabemos y probemos el ejemplo para obtener una salida semejante a la que se ve en el siguiente video
Como pueden ver no importa el texto que seleccionen, siempre nos devolvera lo seleccionado, una aplicacion simple que puede tener varios usos a futuro.
En resumen, hoy hemos hablado sobre el evento onSelect, hemos hablado para que se usa, como aplicarlo y un ejemplo practico para ver su funcionamiento, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.
Tambien podes donar
Es para mantenimiento del sitio, gracias!
$1.50
El blog de Tinchicus 