Replace the value of an input and keep the previous value

Question

Replace the value of an input and keep the previous value

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I need a input[type="text"] , in which the user type anything ("abc", for example), but in the visual appear other symbols, but keeping the previous value when I get it by JavaScript or sent in form in input[type="password"] ).

Would that be possible?

Thanks in advance.

javascript html mask input

asked by anonymous 23.11.2016 / 19:35

2 answers

Solidworks PDM API - IEdmBomView.GetRows does not return the same items for the BOM that are in the PDM How do I add more than one domain to this alert?

score 0 · Answer 1

As simple as possible is to use CSS -webkit-text-security

You can use the values none , square , circle or disc .

Example below using 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>

The part in JavaScript is only for tests with didactic purpose, to display the actual text.

score 0 · Answer 2

In javascript, something manual is to replace the characters with others radically as the user types and stores the original value. It could be more or less like:

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>

It is an example. For a real case, it is important to validate if the user deletes some value, erases by selection, etc.