6

Na OLX, o número do anunciante fica parcialmente visível e só depois que você clica em "Ver número", e o número completo é exibido.

Como faço isso em JavaScript?

2
  • 5
    Seja bem-vindo ao StackOverflow em Português. Uma boa prática para iniciarmos uma discussão saudável é ler o Guia de Como Perguntar. Comece seguindo estas recomendações, principalmente sabendo quais os tipos de perguntas deve fazer, como criar um exemplo mínimo que seja completo e verificável e até mesmo o que fazer quando alguém te responder.
    – Woss
    14/02/2017 às 15:47
  • Qual é o motivo de você precisar desse recurso?
    – Jéf Bueno
    14/02/2017 às 17:09

4 Respostas 4

20

Uma das várias maneiras de fazer isso é manter o número completo num atributo data- e colocando este valor no lugar do número "cortado" quando o usuário clicar em algum botão.

Exemplo:

Javascript puro

document.getElementById('ver-numero').addEventListener('click', function(){
  var telefone = document.getElementById('telefone');
  var numeroCompleto = telefone.getAttribute('data-numero-completo');
  telefone.innerHTML = numeroCompleto;
});
<div id="telefone" data-numero-completo="(51)88991-9889">(51)88991...</div>

<button id="ver-numero">Ver número</button>

Com jQuery

Obs.: Deixei uma versão com jQuery porque, pelo impulso, eu escrevi primeiro usando jQuery.

$('#ver-numero').on('click', function(){
  var telefone = $('#telefone');
  var numeroCompleto = telefone.data('numero-completo');
  telefone.html(numeroCompleto);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="telefone" data-numero-completo="(51)88991-9889">(51)88991...</div>

<button id="ver-numero">Ver número</button>

2

Sei que é em , mas resolvi fazer em css :)

.telefone {
  width :90px;
}

.overflow {
  white-space: nowrap;
  width: 100%;                   
  overflow: hidden; 
  text-overflow:    ellipsis;
}

.overflow:active {
   overflow: visible;  
}
<div class="telefone">
  <p class="overflow">(44) 9 9945-1558</p>
</div>

Fonte: css - text-overflow

1

Fiz uma opção usando apenas CSS com <label> e input[type="checkbox"]

Basta clicar no número para mostra-lo completo. O legal dessa técnica é que vc pode facilmente estilizar o número antes e depois do clique se desejar.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 24px;
}

label {
    width: 120px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    background-color: lightcoral;
    text-overflow: ellipsis;
    cursor: pointer;
}
input:checked + label{
    display: inline;
    background-color: lightblue;
}
input[type="checkbox"]{
    display: none;
}
<input type="checkbox" id="teste">
<label for="teste">(31) 9998-9990</label>

-1

Isso é feito exibindo ou ocultando uma div via javascript. No caso desse site que você passou é só dar uma olhada no código que você encontra o seguinte código:

$("#show_phone").click(function(){
$("#hidden_phone").hide();
$("#visible_phone").show();
...

Dê uma olhada nesse tutorial

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .