Getting a Hidden Password Input

Getting a hidden password input

Use getpass.getpass():

from getpass import getpass
password = getpass()

An optional prompt can be passed as parameter; the default is "Password: ".

Note that this function requires a proper terminal, so it can turn off echoing of typed characters – see “GetPassWarning: Can not control echo on the terminal” when running from IDLE for further details.

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>

Hide/show toggle inside password input

1. First of all, make sure an id is only used once! (Second svg changed)
2. You can hide and show the desired <svg> onclick
3. Wrap the input and svg's into a container for styling
4. I've moved the onclick to the <svg>

var x = document.getElementById("login-form-password");   // Input
var s = document.getElementById("Layer_1");               // Show pass
var h = document.getElementById("Layer_2");               // Hide pass

function togglePass() {
    if (x.type === "password") {
        x.type = 'text';
        s.style.display = 'none';
        h.style.display = 'inline';
    } else {
        x.type = 'password';
        s.style.display = 'inline';
        h.style.display = 'none';
    }   
}

#inputcontainer {
    display: flex;
}
#inputcontainer > svg {
  margin-left: 5px;
}

<p class="signin_title">Sign in</p>
<input type="text" id="login-form-username" name="os_username"  placeholder="Username" required><br><br>

<div id='inputcontainer'>
  <input type="password" id="login-form-password" name="os_password" placeholder="Password" required></input>

  <svg id="Layer_1" onclick="togglePass()" data-name="Layer 1" width="25" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>eye-glyph</title><path d="M320,256a64,64,0,1,1-64-64A64.07,64.07,0,0,1,320,256Zm189.81,9.42C460.86,364.89,363.6,426.67,256,426.67S51.14,364.89,2.19,265.42a21.33,21.33,0,0,1,0-18.83C51.14,147.11,148.4,85.33,256,85.33s204.86,61.78,253.81,161.25A21.33,21.33,0,0,1,509.81,265.42ZM362.67,256A106.67,106.67,0,1,0,256,362.67,106.79,106.79,0,0,0,362.67,256Z"/></svg>
  <svg id="Layer_2" onclick="togglePass()" data-name="Layer 2" width="25" xmlns="http://www.w3.org/2000/svg" style='display: none' viewBox="0 0 512 512"><title>eye-disabled-glyph</title><path d="M409.84,132.33l95.91-95.91A21.33,21.33,0,1,0,475.58,6.25L6.25,475.58a21.33,21.33,0,1,0,30.17,30.17L140.77,401.4A275.84,275.84,0,0,0,256,426.67c107.6,0,204.85-61.78,253.81-161.25a21.33,21.33,0,0,0,0-18.83A291,291,0,0,0,409.84,132.33ZM256,362.67a105.78,105.78,0,0,1-58.7-17.8l31.21-31.21A63.29,63.29,0,0,0,256,320a64.07,64.07,0,0,0,64-64,63.28,63.28,0,0,0-6.34-27.49l31.21-31.21A106.45,106.45,0,0,1,256,362.67ZM2.19,265.42a21.33,21.33,0,0,1,0-18.83C51.15,147.11,148.4,85.33,256,85.33a277,277,0,0,1,70.4,9.22l-55.88,55.88A105.9,105.9,0,0,0,150.44,270.52L67.88,353.08A295.2,295.2,0,0,1,2.19,265.42Z"/></svg>
</div>

HTML with hidden password

Dont put forms in emails. Putting forms in emails is bad.

Is there a way to hide value from input with password in React?

type="password" only cosmetically hides the password. The input value is always accessible via JS (using it's .value property). So when someone opens DevTools, he or she will be able to get the password regardless.

---

Related Topics