Show/Hide Password - How to Add This Feature

How to show/hide password in TextFormField?

First make you widget StatefulWidget if it is a StatelessWidget.

Then have a variable bool _obscureText and pass it to your TextFormField. The toggle it with setState as required.

Example:

class _FormFieldSampleState extends State<FormFieldSample> {

  // Initially password is obscure
  bool _obscureText = true;

  String _password;

  // Toggles the password show status
  void _toggle() {
    setState(() {
      _obscureText = !_obscureText;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Sample"),
      ),
      body: new Container(
        child: new Column(
          children: <Widget>[
            new TextFormField(
              decoration: const InputDecoration(
                  labelText: 'Password',
                  icon: const Padding(
                      padding: const EdgeInsets.only(top: 15.0),
                      child: const Icon(Icons.lock))),
              validator: (val) => val.length < 6 ? 'Password too short.' : null,
              onSaved: (val) => _password = val,
              obscureText: _obscureText,
            ),
            new FlatButton(
                onPressed: _toggle,
                child: new Text(_obscureText ? "Show" : "Hide"))
          ],
        ),
      ),
    );
  }
}

Hope this helps!

Show/Hide Password Toggle. Bug or Feature?

I can't find the documentation for it, but I recall that changing the secure entry setting also changes clearsOnInsertion.

Look at setting clearsOnInsertion and / or using the delegate methods textFieldShouldClear: and textField:shouldChangeCharactersInRange:replacementString: to modify this behaviour.

I guess the logic is that the user will generally not be sure what they previously typed as they can't see the characters so the sage option is to force the user to start over.

Javascript - Show / Hide password function for multiple input fields

Pass the target field to showPassword():

function showPassword(targetID) {
  var x = document.getElementById(targetID);

  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }

}

label.t2 {
    font-size: 14px!important;
  line-height: 1.5em!important;
  font-weight: 500!important;
    margin-bottom: 6px!important;
    display: block;
}

/*Toggle Password class*/
#togglePw { display: none; }
#togglePw + label:before { content: "\f06e"; }
#togglePw:checked + label:before { content: "\f070"; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

<p class="">
    <label class="t2" for="password_current">Current Password</label>
    <input type="password" class="field-settings" name="password" id="password_current" autocomplete="off"/>
    <input type="checkbox" id="togglePw_current" onclick="showPassword('password_current')"/>
    <label for="togglePw_current" class="fa"></label>
</p>

<p class="">
    <label class="t2" for="password_1">New Password</label>
    <input type="password" class="field-settings" name="password_1" id="password_1" autocomplete="off" />
    <input type="checkbox" id="togglePw_1" onclick="showPassword('password_1')"/>
    <label for="togglePw_1" class="fa"></label>
</p>

<p class="">
    <label class="t2" for="password_2">Repeat New Password</label>
    <input type="password" class="field-settings" name="password_2" id="password_2" autocomplete="off" />
    <input type="checkbox" id="togglePw_2" onclick="showPassword('password_2')"/>
    <label for="togglePw_2" class="fa"></label>
</p>

Show/Hide password form JS

Perhaps it is because you are not using an existing class, that is, you are telling it to search for an element by the class ".toggle-password_1", perhaps the most correct thing is to add an ID to it and search for said label by its ID.

The correction would be such that:

passField_1.wrap("<div class='ff_input-group'></div>");
passField_1.after('<div class="ff_input-group-append"><span class="ff_input-group-text"><i id=¨confirmPass¨ style="cursor:pointer;" class="dashicons dashicons-hidden toggle-password"> </i></span></div>');

$form.find("#confirmPass").click(function() {
    $(this).toggleClass("dashicons-visibility dashicons-hidden");
    if (passField_1.attr("type") == "password") {
        passField_1.attr("type", "text");
    } else {
        passField_1.attr("type", "password");
    }
});

Pdt: The object was not called correctly in the function, the correct reference is "passField_1"

I'm new helping on stackoverflow, I hope my answer helped you :)

Show hide password

You have to change the element attribute with Element.setAttribute like this:

const inputs = document.querySelectorAll('.show-hide-password');
const icon = document.querySelectorAll('i.password');

// Experiment 1
icon.forEach(function (ele) {
   ele.addEventListener('click', function (e) {
      const targetInput = e.target.previousElementSibling.getAttribute('type');
      if (targetInput == 'password') {
          e.target.previousElementSibling.setAttribute('type', 'text');
          ele.classList.remove('fa-eye-slash');
          ele.classList.add('fa-eye');
      } else if (targetInput == 'text') {
          e.target.previousElementSibling.setAttribute('type', 'password');
          ele.classList.add('fa-eye-slash');
          ele.classList.remove('fa-eye');
      }
   });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<div class="form-group">
   <label>New Password</label>
   <input type="password" class="form-control show-hide-password" autocomplete="off" required>
   <i class="fa fa-eye-slash password"></i>
</div>
<div class="form-group">
   <label>Confirm New Password</label>
   <input type="password" class="form-control show-hide-password" autocomplete="off" required>
   <i class="fa fa-eye-slash password"></i>
</div>

Show/hide password How to fix this?

let btn = document.getElementById('pass-btn');
let icon = btn.querySelector('ion-icon');
let input = document.getElementById('password');

btn.addEventListener('click', () => {
  input.type == 'password' ? [input.type = 'text', icon.setAttribute('name', 'eye-off')] : [input.type = 'password', icon.setAttribute('name', 'eye')];
  input.focus();
});

* {
  margin:  0;
  padding: 0;
  box-sizing: border-box;
}

.form {
  margin: 20px auto;
}

div {
  position: relative;
  width: 200px;
  height: 30px;
  margin-bottom: 10px;
}

input {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 5px;
}

ion-icon {
  font-size: 20px;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 100%;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
}

button:hover > ion-icon {
  opacity: 0.8;
}

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>

<div class="form">
  <div>
    <input type="email" placeholder="E-mail" />
  </div>
  <div>
    <input type="password" placeholder="Password" id="password" />
    <button id="pass-btn">
      <ion-icon name="eye"></ion-icon>
    </button>
  </div>
</div>

---

Related Topics