Build a Bootstrap 4 Password Show/Hide Input Field in jQuery Using Javascript

Build a Bootstrap 4 Password Show/Hide Input Field in jQuery Using Javascript I am very interested to talk to you about this article. The reason is that this article contains very interesting information. Let’s go to this article

Build a Bootstrap 4 Password Show/Hide Input Field in jQuery Using Javascript

Build a Bootstrap 4 Password Show/Hide Input Field in jQuery Using Javascript

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<div class="container">
<div class="row">
  <div class="col-md-8 col-md-offset-2">

    <div class="panel panel-default">
      <div class="panel-body">
        <form class="form-horizontal" method="" action="">

          <div class="form-group">
            <label class="col-md-4 control-label">Email</label>
            <div class="col-md-6">
              <input type="email" class="form-control" name="email" value="">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-4 control-label">Password</label>
            <div class="col-md-6">
              <input id="password-field" type="password" class="form-control" name="password" value="secret">
              <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
}

.container{
  padding-top:50px;
  margin: auto;
}
$(".toggle-password").click(function() {

  $(this).toggleClass("fa-eye fa-eye-slash");
  var input = $($(this).attr("toggle"));
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});

Read Also: jQuery Tutorial to Download Multiple ZIP Files at Once on Button Click in Browser Using HTML5 & Javascript

Final Words

We learned some interesting information through the article Build a Bootstrap 4 Password Show/Hide Input Field in jQuery Using Javascript. Also if you have any doubts about this article you can report your doubts as a comment box fake. Thanks

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Deekshi. Here, I post about programming to help developers.

Share on:

Leave a Comment