Place mask/unmask button inside a password input element

Question

I want to add Eye-open bootstrap icon of toggling hide/show to my input field. I already know the javascript to do it. I only want to how can I add that eye image to input field.

Found this html code from W3 school - for eye icon https://www.w3schools.com/icons/tryit.asp?filename=trybs_ref_glyph_eye-open

You don't want what you ask you want, but you want to place a **button** inside an input. the icon part is irrelevant to your question. — vsync, Jul 03 '18 at 10:47

vsync · Answer 1 · 2019-02-06T20:08:25.140

This is what you really after, a checkbox inside an input field

the checkbox toggles the password masking on "change" event

document.querySelector('.toggleMask').addEventListener('change', onToggleMaskChange);

function onToggleMaskChange(){
  this.nextElementSibling.type = this.checked ? 'text' : 'password'
}

.form-group{
  position: relative;
  width: 50%; /* <-- just for demo */
  overflow:hidden;
}

.form-group > .toggleMask{
  position: absolute;
  top: 0;
  right: -20px;
  text-indent: -30px;
  height:100%;
  line-height: 2;
  pointer-events: auto;
  z-index: 5;
  cursor: pointer;
}

.form-group > .toggleMask ~ input{
  padding-right: 30px;
}

.form-group > .toggleMask:checked::before{
  content:"\e105";
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
    <input type='checkbox' class="glyphicon glyphicon-eye-close toggleMask"/>
    <input type="password" class="form-control" />
</div>

For the commenter who asked for IE support:

var toggleInput = document.querySelector('.toggleMask > input');
toggleInput.addEventListener('change', onToggleMaskChange);

function onToggleMaskChange(){
  
  this.nextElementSibling.className = this.checked 
    ? this.nextElementSibling.className.replace('open', 'close')
    : this.nextElementSibling.className.replace('close', 'open')
    
  this.parentNode.nextElementSibling.type = this.checked ? 'text' : 'password'
}

.form-group{
  position: relative;
  width: 50%; /* <-- just for demo */
  overflow:hidden;
}

.form-group > .toggleMask{
  position: absolute;
  top: 3px;
  right: -30px;
  text-indent: -30px;
  height:100%;
  line-height: 2;
  pointer-events: auto;
  z-index: 5;
  cursor: pointer;
}

.form-group > .toggleMask ~ input{
  padding-right: 30px;
}

.form-group > .toggleMask:checked > span{
  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class='form-group'>
    <label class='toggleMask'>
      <input type='checkbox' hidden/>
      <i class='glyphicon glyphicon-eye-close'></i>
    </label>
    <input type='password' class='form-control' />
</div>

@NateRadebaugh - IE? which version? `6`? `9`? `11`? please be specific what exactly doesn't work. — vsync, Feb 06 '19 at 15:37
Sorry. The above snippet does not render any icons when viewing using the latest version of IE (11.1000.18298.0) I think this is due to the CSS used: See this explanation here for more context: https://stackoverflow.com/questions/26961271/valid-css-not-working-in-internet-explorer-11 — Nate Radebaugh, Feb 06 '19 at 16:57

לבני מלכה · Accepted Answer · 2018-07-03T08:28:31.907

1

Use form-control-feedback to i tag

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>
    <i class="glyphicon glyphicon-eye-open form-control-feedback"></i>
    <input type="password" class="form-control" />
</div>

Edit to use fontAwesome instead bootstrap:https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

Use :after to wrap div

div:after{
    font-family: 'FontAwesome';
    position: relative;
    left: -26px;
    content: "\f06e";
}

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
 <input name="username"">
</div>

edited Jul 03 '18 at 08:28

answered Jul 01 '18 at 08:31

לבני מלכה

15,925
2
23
47

What to do when using W3.CSS – Jul 02 '18 at 13:00
what do you mean? can you explain? – לבני מלכה Jul 02 '18 at 13:13
I am already using W3.CSS library for my website and when I put this bootstrap code everythings gets messed up. I cannot use "form-control" with W3.CSS. – Jul 02 '18 at 13:24
so you will not able to use this icons because it bootstrap icons... so what do you want to use? – לבני מלכה Jul 03 '18 at 05:41
I want to use W3.CSS library instead of bootstrap library. https://www.w3schools.com/icons/fontawesome_icons_webapp.asp – Jul 03 '18 at 08:19
Really Sorry don't have enough reputation. – Jul 03 '18 at 08:47

score -1 · Answer 3 · edited Jul 01 '18 at 09:22

-1

HTML Part:

<input type="password" value="FakePSW" id="myInput">
<input type="checkbox" onclick="myFunction()">`

JS Part:

function myFunction() {
    var x = document.getElementById("myInput");
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
 }

You just might use this

edited Jul 01 '18 at 09:22

arslanaybars

1,813
2
24
29

answered Jul 01 '18 at 08:35

Yahya Barrawi

1
1

You just copied and paste from w3schools SMH...and did not provide references. – Tatarin Jul 28 '20 at 21:46

Place mask/unmask button inside a password input element

3 Answers3

This is what you really after, a checkbox inside an input field

For the commenter who asked for IE support: