How to make the stars in <input type="password"> , and not balls and squares?
Is it possible to do this?

  • Asterisks and balls and squares XD) depend on the browser and its version! And these stars and balls do not affect the quality of the transmitted data! - Palmervan
  • It's not about data transmission, but from the layout, I would like to have these ***** instead of balls, etc.) By the way, nothing was said about the transfer of data xD - Goldy
  • one
    You can try to play with fonts, but it will not give any guarantee. - ling
  • @ling, He will achieve a change of balls on the squares ... And that's it. =) Do not replace the asterisks like this: this is really another character, and almost at the OS level in some cases. - knes
  • I always thought it was at the level of HTML, would it really be necessary to connect JavaScript? - Goldy

4 answers 4

 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .replacer{border:1px #666 dotted;height:20px;display:inline-block;color:#444;background:#eee} .replacer.current{border-color:#ccc;color:#000;background:#fff} </style> <script type="text/javascript" src="http://yandex.st/jquery/1.6.4/jquery.min.js"></script> </head> <body> *: <input type="password" rel="to-replace" /><br /> $: <input type="password" rel="to-replace-$" /><br /> .: <input type="password" rel="to-replace-." value="1234" /><br /> <script type="text/javascript"> $('input:password[rel^="to-replace"]').each(function(){ var s = this.getAttribute('rel').replace('to-replace', ''); if(!s) s = '*'; else s = s.replace('-', ''); var t = $(this); var r = $('<span class="replacer"></span>').css({ height: t.height(), width: t.width(), display: 'inline-block' }); t.css({position:'absolute',left:'-5000px'}) .keyup(function(){ var str = ''; for(var i = 0; i < this.value.length; ++i) str += s; $(this).next().html(str); }) .focusin(function(){ $(this).next().addClass('current'); }) .focusout(function(){ $(this).next().removeClass('current'); }) .after(r); t.keyup(); }); $('.replacer').live('click', function(){ var t = $(this).prev()[0]; t.focus(); t.value = t.value; }); </script> </body> </html>

A bit crooked solution, but it can be modified. By file =)

    Look at this example - the replacement of "balls" in the picture. You can draw an asterisk and replace it with an asterisk

    • The cursor is among the balls in some browsers. It is annoying. - knes
    • one
      Balls do not disappear when deleting text. Yes, and they are wider than the replacement mark, so the cursor behind them "does not have time." Google Chrome - ling
    • And if you replace not with pictures, but with a symbol, for example, "*"? Will there be similar glitches too? - Damon

    <input type="text"> and field handling javascript?

    • The idea is correct;) - knes
     <input type="text" id='fakePassword' />

    // JS:

     var fakePassword = new Object(); fakePassword.element = getElementById('fakePassword'); fakePassword.element.onkeyup = function(){ fakePassword.value = fakePassword.element.value; fakePassword.element.value.replace(/[^*]/,'*'); } //... yourForm.onsumbit = function(){ fakePassword.element.style.visibility = 'hidden'; fakePassword.element.value = fakePassword.value; }

    Consider it as pseudo-code: I did not check the performance, but this thought. When entering text, all characters except the asterisk are replaced with an asterisk, and before that, the value is saved into a variable. Immediately before submitting the form, its meaning is returned to the field.

    PS If you answer directly: no, in type = "password" you cannot make a cross-browser solution for replacing balls with asterisks with layout options. Some browsers understand the mask attribute, but not all.