Ocultar texto con *****

Fer12 · #1 (**permalink**) 22/06/2011, 06:41

Hola quisiera sabe si es posible o si le ven alguna salida a lo que pretendo, necesito poner en un articulo un texto que el usuario debera copiar y pegar para un acceso , quisiera que no se viera el texto y que solo se viera asi ******** ya que en color blanco al seleccionar se identifica bien el texto que quiero ocultar. Si fuera posible asi o de otra forma segun entiendan se los agradezco

_cronos2 · #2 (**permalink**) 22/06/2011, 07:42

No entendí qué es lo que quieres hacer... ¿Podrías explicarte más o poner un ejemplo?
Saludos (:

America|UNK · #3 (**permalink**) 22/06/2011, 08:10

Quiere copiar un texto convertido en asteriscos para que el texto no sea visible, podrías usar métodos de copiar al portapapeles en Javascript, otra manera es con CSS para añadir el mismo color a la selección de fondo y texto, pero no funciona en todos los navegadores. Con el uso de Javascript también tendrás problemas con los navegadores y te irías al uso de Flash (copy clipboard javascript)

Código CSS:

Ver originaltextarea::selection {
    background:#f14;
    color:#f14;
}
 
textarea::-moz-selection {
    background:#f14;
    color:#f14;
}
 
textarea::-webkit-selection {
    background:#f14;
    color:#f14;
}

Código HTML:

Ver original<textarea rows="12" cols="22">
Texto ... Texto ... Texto ... Texto ... Texto ... Texto ... 
Texto ... 
Texto ... Texto ... Texto ... Texto ... Texto ... Texto ... Texto ... Texto ... Texto ... 
Texto ... Texto ... Texto ... Texto ... 
</textarea>

Fer12 · #4 (**permalink**) 22/06/2011, 10:20

Si _Cronos2 lo que necesito es lo que dice America|UNK , ahora una dificultad más es que esto lo necesito implementar en joomla, pero bueno se que no es facil , pero cualquier idea me viene bien . intente implementar lo arriba expuesto America|UNK pero no me va bien. gracias

Naahuel · #5 (**permalink**) 22/06/2011, 11:00

¿Qué tal algo así?
http://jsbin.com/eweti5

Código:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style>
  #mensaje{
    background:transparent;
    color:inherit;
    border:0;
    outline:0;
  }
</style>
<script>
  $(function(){
    var input_mensaje = $('#mensaje');
    var mensaje = input_mensaje.val();
    var oculto = mensaje.replace(/./g,'*');
    input_mensaje.select(function(){
      $(this).val(mensaje);
    }).val(oculto).focusout(function(){
      $(this).val(oculto);
    });  
  });  
</script>
</head>
<body>
  <input type="text" id="mensaje" value="Mensaje Escondido" />
</body>
</html>

Tiene sus limitaciones, claro. Podría trabajarse un poco más y tratar de obtener el texto que se ha seleccionado, aunque eso es un trabajo difícil de compatibilidad cross-browser.

Naahuel · #6 (**permalink**) 22/06/2011, 11:43

Bueno, otra aproximación:
http://nahueljose.com.ar/ejemplos/jq...-seleccionado/

Este te actualiza la selección mientras la mantienes. Funciona mejor si el sentido de la selección es de derecha a izquierda, por algún motivo.

:)

Fer12 · #7 (**permalink**) 22/06/2011, 13:19

Gracias Naahuel , mira la primera opción seria exactamente lo que necesito o me gustaria, pero no permite copiar, al seleccionar los *** muestra el texto pero aun asi tampoco puedo copiarlo en chrome, la segunda no me funciona del todo ya que no puedo copiarla , pero si que por ahi van los tiros ;) , saludo y si hay otras sugerencias seran bienvenidas ;)

Fer12 · #8 (**permalink**) 23/06/2011, 15:09

Alguna idea ?

InKarC · #9 (**permalink**) 23/06/2011, 21:27

Solo hay que hacer la letra muy pequeña y unos cuantos trucos CSS/javascript y queda el efecto.

Aqui esta: http://jsfiddle.net/3VSCT/4/

Fer12 · #10 (**permalink**) 24/06/2011, 04:28

Cita:

Iniciado por InKarC

Solo hay que hacer la letra muy pequeña y unos cuantos trucos CSS/javascript y queda el efecto.

Aqui esta: http://jsfiddle.net/3VSCT/4/

Es perfecto y funciona tal cual. asi que gracias a todos y a ti por la solución