| Autor |
Mensaje |
-
guias-programas
Semi-Experto
Ubicación: Argentina - Bs.As
|
 14-02-2012, 13:35 (UTC)
Título del mensaje: Seleccionar Texto Con JQuery |
|
|
Hola !
Supongamos que tenemos un código HTML dentro de una caja de texto y que queremos el usuario lo pueda copiar facilmente, en este minitutorial veremos como hacerlo con jQuery.
Paso 1
Creamos primero una caja de texto:
Código: <textarea cols="30" rows="10">Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros</textarea>
En este caso estoy usando un textarea, pero funcionaria igual con un input
Paso 2
Primero incluimos a jQuery, abrimos otro script, nos aseguramos que el documento haya terminado de cargar y seleccionamos a textarea que es el elemento con el que vamos a trabajar.
Luego le decimos que cuando el elemento este en focus se seleccione todo su contenido.
Código: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("textarea").focus(function(){
this.select();
});
});
</script>
Hasta esta parte ya deberíamos tener funcionado nuestro script.
Sin embargo, si lo probamos en Chrome o Safari no funcionara, esto es debido a que en estos navegadores se antepone por defecto el metodo mouseup y genera conflicto con el focus.
Para arreglarlo, solo tenemos que agregar lo siguiente a nuestro script
Código: $("textarea").mouseup(function(e){
e.preventDefault();
});
Código final
Código:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("textarea").focus(function(){
this.select();
});
$("textarea").mouseup(function(e){
e.preventDefault();
});
});
</script>
<body>
<textarea cols="30" rows="10">Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros</textarea>
</body>
</html>
Ultima edición por guias-programas el Mar Feb 14, 2012 9:36 am; editado 1 vez
|
|
|
↑
|
|
 |
-
dedydamys
Nuevo
|
17-02-2012, 05:59 (UTC)
Título del mensaje: |
|
|
No es por ser mala onda pero podria ser mas facil sin jquery... u.u
dedydamy escribió: <textarea cols="30" rows="10" onclick="this.select()">Texto mágico</textarea>
Entiendo perfectamente la parte de que tu das otra forma, por jquery, pero yo pienso que es mas factible usar este codigo a causa de que es un poco mas rapidin ^^
Ultima edición por dedydamys el Vie Feb 17, 2012 2:01 am; editado 1 vez
|
|
|
↑
|
|
|
-
m3sg
Semi-Experto
|
17-02-2012, 06:14 (UTC)
Título del mensaje: |
|
|
dedydamys escribió: No es por ser mala onda pero podria ser mas facil sin jquery... u.u
dedydamy escribió: <textarea cols="30" rows="10" onclick="this.select()">Texto mágico</textarea>
Entiendo perfectamente la parte de que tu das otra forma, por jquery, pero yo pienso que es mas factible usar este codigo a causa de que es un poco mas rapidin ^^
Es verdad tanto lio de codigos para una simple linea y ensima el mismo resultado XD ______________  |
|
|
↑
|
|
|
-
nesbet
Semi-Experto
Ubicación: Buenos Aires - Argentina
|
18-02-2012, 05:46 (UTC)
Título del mensaje: |
|
|
Concuerdo con el resto de mis compañeros, pero un aporte es un aporte, y este no es la excepción. Muy bueno!  |
|
|
↑
|
|
|
-
guias-programas
Semi-Experto
Ubicación: Argentina - Bs.As
|
19-02-2012, 02:34 (UTC)
Título del mensaje: |
|
|
m3sg escribió: dedydamys escribió: No es por ser mala onda pero podria ser mas facil sin jquery... u.u
dedydamy escribió: <textarea cols="30" rows="10" onclick="this.select()">Texto mágico</textarea>
Entiendo perfectamente la parte de que tu das otra forma, por jquery, pero yo pienso que es mas factible usar este codigo a causa de que es un poco mas rapidin ^^
Es verdad tanto lio de codigos para una simple linea y ensima el mismo resultado XD
Bueno meta*ce el codigo en la c*la ,, Q se yo q abia otro
Ultima edición por guias-programas el Sab Feb 18, 2012 11:12 pm; editado 1 vez
|
|
|
↑
|
|
|
-
team-soporte
Semi-Experto
|
19-02-2012, 03:13 (UTC)
Título del mensaje: |
|
|
Cuide su lenguaje, realmente es bastante obsceno, le suspenderé por 1 día.
Sobre el aporte, debemos de irnos adaptando a los nuevos lenguajes de programación y es justo lo que trata el post, otra forma de seleccionar el texto.
saludes,
Team-Soporte.______________ Team-Soporte.
Moderador de PaginaWebGratis.es
www.team-soporte.es.tl | @jeremymolina |
|
|
↑
|
|
|
|
