2

Preciso de um input[type="text"], em que o usuário escreva qualquer coisa ("abc", por exemplo), mas no visual apareça outros símbolos, mas mantendo o valor anterior quando pego pelo JavaScript ou enviado num form (como num input[type="password"]).

Seria isso possível?

Agradeço antecipadamente.

1
  • 2
    O que voce tentou ate agora? Coloque o codigo para vermos e te falarmos o que voce precisa ajustar ou corrigir
    – MarioAleo
    Commented 23/11/2016 às 18:50

2 Respostas 2

1

O mais simples possível é usar CSS -webkit-text-security

Pode usar os valores none, square, circle ou disc.

Exemplo abaixo usando circle:

    function Foo() {
    	frm = document.getElementById("frm");
    	document.getElementById("bar").innerHTML = frm["foo"].value;
    	//console.log(frm["foo"].value);
    }
input.foo { -webkit-text-security: circle; }
    <form id="frm" action="" method="POST">
    <input type="text" name="foo" class="foo" size="15">
    <input type="button" value="clique para ver o texto real" onclick="Foo();">
    </form>
    
    <br><div id="bar"></div>
    

A parte em JavaScript é apenas para testes com finalidade didática, para exibir o texto real.

0

Em javascript, algo manual é substituir os caracter por outros radômicamente a medida que o usuário digita e armazenar o valor original. Poderia ser mais ou menos como:

var textoOriginal = '';
var entrada = document.getElementById("entrada");

function embaralhar(event) {
  var x = event.which || event.keyCode;
  if (x !== 8) { 
    textoOriginal += entrada.value.substr(entrada.value.length - 1);

    entrada.value = entrada.value.replaceAt(entrada.value.length -1, randomico());
  }
};

function exibir() {
  document.getElementById("texto").innerHTML = textoOriginal;
};

function limpar() {
  textoOriginal = '';
  document.getElementById("texto").innerHTML = '';
  document.getElementById("entrada").value = '';
};

function randomico() {
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  return possible.charAt(Math.floor(Math.random() * possible.length));

}

String.prototype.replaceAt = function(index, character) {
  return this.substr(0, index) + character + this.substr(index + character.length);
}
<input id="entrada" type="text" onkeypress="embaralhar(event)" />
<label id="texto">
  <br/>
  <br/>
<button id="exibir" onClick="exibir()">Exibir Original
<button id="limpar" onClick="limpar()">Limpar</button>

É um exemplo. Para um caso real, é importante validar se o usuário apaga algum valor, apaga por meio de seleção, etc.

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 .