Change Password Char in HTML

Changing the symbols shown in a HTML password field

You can't change the password masking character in the standard password field. You can fake it with a textbox, but it makes for a weak security model because you don't get the protection you do from the password textbox. As a side note, it's generally not a good idea to change the behaviour of items like this because users have become used to one form of masking, and you will be introducing a different one - if there's no good reason to do this, I'd avoid it.

change password char in HTML

As far as I know, this can't be done. The password field is rendered natively by the browser.

You could probably build a JavaScript-based workaround, but that would not be as secure, break auto-completion and/or the browser's internal password management, and have other side-effects.

If at all possible, I would stick with the browser's rendering.

how to change the password display character?

Without using JavaScript, it's impossible.

Mask password character size too small

First you need to use a media query that will only match for Chrome (or other WebKit based browsers):

@media screen and (-webkit-min-device-pixel-ratio:0) {

}

And to increase the size of those dots you can use -webkit-text-stroke-width in combination with letter-spacing:

/* this will only apply to Webkit browsers like Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type="password"] {
       -webkit-text-stroke-width: 0.2em;
       letter-spacing: 0.2em;
    }
}

jsFiddle

Hide input html for password with *

Its not possible to change the symbol using some attributes. It depends on the userAgent and OS. But you still manipulate with the few tweaks.

const inputEl = document.querySelector('input');

const dummyEl = document.querySelector('#dummy');

const resultEl = document.querySelector('#result');

inputEl.addEventListener('keyup', () => {
  const dummyText = Array(inputEl.value.length).fill('*').join('');
  dummyEl.innerHTML = dummyText;
  resultEl.innerHTML = inputEl.value;
})

div {
  position: relative;
}
input {
  color: transparent;
}
span {
  position: absolute;
  top: 7px;
  left: 3px;
}

<div>
  <input type="password" />
  <span id="dummy"></span>
</div>
<div id="result"></div>

---

Related Topics