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.