ocultar numero telefono y mostrar xxx

charlescuella · #1 (**permalink**) 16/04/2013, 16:37

hola amigos en algunas paginas de clasificados he visto una opcion en donde muestran parte del telefono de contacto y al lado dise click aqui para montrar telefono

algo asi

317 391 XXXX Click Aqui para mostrar

en donde tu le das click y este te reemplaza las XXXX por los numero faltantes.

estoy como se hace me podrían dar una mano con ello muchas gracias.

Albuss · #2 (**permalink**) 16/04/2013, 20:06

eso no es javascript, es HTML, los formularios tienen una opción para ello "password" (para cualquier imput aunque no este dentro de un form)

charlescuella · #3 (**permalink**) 16/04/2013, 21:16

amigo yo digo algo asi

y luego qda asi al darle click

espero me entiendan

ggomez91 · #4 (**permalink**) 16/04/2013, 21:22

Cita:

Iniciado por Albuss

eso no es javascript, es HTML, los formularios tienen una opción para ello "password" (para cualquier imput aunque no este dentro de un form)

No creo que se refiera a eso, dice que es solo en parte y además al dar click se muestra el resto.

Sí es con JS, lo primero es obtener el número, luego lo divides en dos partes, una la muestras y la otra no, al detectar el click reemplazas el numero parcial por el completo.

Este código te explica como:

Código:

<html>
    <head>
        <title>Prueba</title>
    <script type="text/Javascript">
    
    // Guardar el número y una copia con las XXXX
    var numero = "56655225";
    var numeroParcial = numero.substring(0, 5) + "XXX";
    
    // se ejcuta al cargar
   function init(){
         // poner el numero parcial de entrada
        document.getElementById("numero").value = numeroParcial;
    }
    
    // funcion que muestra el numero completo al dar click
    function mostrarNumero(){
        document.getElementById("numero").value = numero;
    }
    </script>
    <head>
    <body onload="init()">
        <input id="numero"></input>
        <a href="#" onclick="mostrarNumero()">Mostrar numero completo</a>
    </body>
</html>

charlescuella · #5 (**permalink**) 16/04/2013, 23:47

hola gracias por ese aporte

hay manejas un input
pero le puede usar sin el input ? y no salen las XXX ? solo queda el input en blanco pero apanas de das el click muestra el numero

ggomez91 · #6 (**permalink**) 17/04/2013, 22:31

Hola, se puede usar una tag distinta al input, si fuera un div o algo así sería con
.innerHTML en lugar de .val

Probé el código en chrome, yo creo que no te funcionó por el browser que usaste (por el evento onload, creo que no funciona bien en IE). En cual browser lo intentaste?

Para hacer onload normalmente se usa jQuery que se encarga de estandarizar varias cosas.

charlescuella · #7 (**permalink**) 18/04/2013, 08:13

Ps yo el probado con el chrome y sale asi

ggomez91 · #8 (**permalink**) 18/04/2013, 08:29

En la consola de desarrollador sale algún error?
Si intentas ejecutar la función init() desde la consola aparece el número con XX?

Puedes intentar quitar el onload del <body> y usar este shortcut de jquery para ejecutar cosas al incio:

Código Javascript:

Ver original$(function(){
    init();
});

No olvides que para usar jquery necesitas importar la librería, para jalarla desde Google:

Código Javascript:

Ver original<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

charlescuella · #9 (**permalink**) 18/04/2013, 08:39

efectivamente agregando el

Código PHP:

Ver original$(function(){
    init();
});

sale asi

ahora como lo dejo sin el input
vamos bien :)

ggomez91 · #10 (**permalink**) 18/04/2013, 08:44

Para eso solo debes cambiar el <input> por otro tag como <span>:

Código HTML:

Ver original<!-- cambair esto -->
<input id="numero"></input>
 
<!-- por esto -->
<span id="numero"></span>

y ya que span no tiene una propiedad val hay que modificar el script de esta forma:

Código Javascript:

Ver original// cambiar esto
document.getElementById("numero").value = numeroParcial;
 
// por esto
document.getElementById("numero").innerHTML = numeroParcial;

charlescuella · #11 (**permalink**) 18/04/2013, 14:36

mmm ya
tambien hay que cambiar esta

Código PHP:

Ver originaldocument.getElementById("numero").innerHTML = numero;

hay todo bien con el valor fijo

var numero = "56655225";
pero si le pongo esto no deja

var numero = $articulo->telefono;
:/

ggomez91 · #12 (**permalink**) 18/04/2013, 14:41

Parece que estás intentando obtener el número desde PHP, no es así?
Si vas poner PHP en tu html necesitas hacer echo:

Código PHP:

Ver originalvar numero = <?php echo $articulo->telefono; ?>;

de forma que el <?php...?> se reemplace por el número y el javascript te quede como debe. Si usas PHP puedes evitar la parte del init() y simplemente poner el número en tu span:

Código PHP:

Ver original<span id="numero"><?php echo $articulo->telefono; ?></span>

charlescuella · #13 (**permalink**) 18/04/2013, 14:55

Asi lo tengo

Código PHP:

Ver original<script type="text/javascript">
    $(function(){
    init();
});
    // Guardar el número y una copia con las XXXX
    var numero = <?php echo $articulo->telefono; ?>;
    var numeroParcial = numero.substring(0, 5) + "XXXX";
    
    // se ejcuta al cargar
   function init(){
         // poner el numero parcial de entrada
        document.getElementById("numero").innerHTML = numeroParcial;
    }
    
    // funcion que muestra el numero completo al dar click
    function mostrarNumero(){
        document.getElementById("numero").innerHTML = numero;
    }
    </script>
 
<span id="numero"><?php echo $articulo->telefono; ?></span>
<a href="#" onclick="mostrarNumero() "style="font-size:0.7em;">Ver Telefono</a>

me vota esto

el de abajo es un <?php echo $aticulo->telefono ?>

que tengo mal ps me sale undefined

ggomez91 · #14 (**permalink**) 18/04/2013, 14:57

Tu variable $articulo->telefono no está definida, es problema de donde sea que la declares o inicialices. Debes tener un control que te manda a esta página, donde se llena $articulo

charlescuella · #15 (**permalink**) 18/04/2013, 15:15

Cita:

Iniciado por ggomez91

Tu variable $articulo->telefono no está definida, es problema de donde sea que la declares o inicialices. Debes tener un control que te manda a esta página, donde se llena $articulo

pero si no se llenara el resultado de abajo no se mostraria

Ekel · #16 (**permalink**) 19/04/2013, 17:28

lo que quieres mostrar es un String
por tanto necesitas

Código HTML:

 var numero = "<?php echo $articulo->telefono; ?>";

un número es un INT y lo quieres mostrar como STRING es diferente..

declara como STRING.. con las comillas.

charlescuella · #17 (**permalink**) 19/04/2013, 18:13

Ekel eso faltaba la "" :S
muchisimas gracias al = que ggomez91 excelente

Ekel · #18 (**permalink**) 19/04/2013, 18:23

aunque como recomendación, de seguridad esto no es una buena práctica.. ;D

una idea: mejor escribirlo en una imagen.

Saludos.