rednl2
Pay-per-click Pro
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
400 XP
This is the step by step procedure in this tutorial:
Add dependency
In the header portion of your HTML, add the following:
Add style
Include the following style.
Add the Input
Next, we create our input type.
Adding our jQuery Script
Last step is to add our jquery script.
That ends this tutorial. Happy Coding :)
Add dependency
In the header portion of your HTML, add the following:
- <link
href
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel
=
"stylesheet"
>
- <link
href
=
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel
=
"stylesheet"
>
- <script
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"
></
script
>
Add style
Include the following style.
- #myInput
{
- font-size
:
1em
;
- padding
:
1em
;
- }
Add the Input
Next, we create our input type.
- <input
type
=
"password"
id
=
"myInput"
>
<button
type
=
"button"
class
=
"btn btn-primary"
id
=
"showBtn"
><i
class
=
"fa fa-eye"
id
=
"icon"
></
i
>
<span
id
=
"btnText"
>
Show</
span
></
button
>
Adding our jQuery Script
Last step is to add our jquery script.
- $(
document)
.ready
(
function
(
)
{
- $(
'#showBtn'
)
.click
(
function
(
)
{
- var
type =
$(
'#myInput'
)
.attr
(
'type'
)
;
- if
(
type ==
'password'
)
{
- $(
'#myInput'
)
.attr
(
'type'
,
'text'
)
;
- $(
'#btnText'
)
.text
(
'Hide'
)
;
- $(
'#showBtn'
)
.removeClass
(
'btn-primary'
)
.addClass
(
'btn-default'
)
;
- $(
'#icon'
)
.removeClass
(
'fa-eye'
)
.addClass
(
'fa-eye-slash'
)
;
- }
- else
{
- $(
'#myInput'
)
.attr
(
'type'
,
'password'
)
;
- $(
'#btnText'
)
.text
(
'Show'
)
;
- $(
'#showBtn'
)
.removeClass
(
'btn-default'
)
.addClass
(
'btn-primary'
)
;
- $(
'#icon'
)
.removeClass
(
'fa-eye-slash'
)
.addClass
(
'fa-eye'
)
;
- }
- }
)
;
- }
)
;
- <!DOCTYPE html>
- <html
>
- <head
>
- <meta
charset
=
"utf-8"
>
- <title
>
Toggle Password Visibility using jQuery</
title
>
- <link
href
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel
=
"stylesheet"
>
- <link
href
=
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel
=
"stylesheet"
>
- <script
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"
></
script
>
- <style
type
=
"text/css"
>
- #myInput{
- font-size: 1em;
- padding: 1em;
- }
- </
style
>
- </
head
>
- <body
>
- <div
class
=
"container"
>
- <h1
class
=
"page-header text-center"
>
Toggle Password Visibility using jQuery</
h1
>
- <div
class
=
"row"
>
- <div
class
=
"col-sm-4 col-sm-offset-4"
>
- <input
type
=
"password"
id
=
"myInput"
>
<button
type
=
"button"
class
=
"btn btn-primary"
id
=
"showBtn"
><i
class
=
"fa fa-eye"
id
=
"icon"
></
i
>
<span
id
=
"btnText"
>
Show</
span
></
button
>
- </
div
>
- </
div
>
- </
div
>
- <script
type
=
"text/javascript"
>
- $(document).ready(function(){
- $('#showBtn').click(function(){
- var type = $('#myInput').attr('type');
- if(type == 'password'){
- $('#myInput').attr('type', 'text');
- $('#btnText').text('Hide');
- $('#showBtn').removeClass('btn-primary').addClass('btn-default');
- $('#icon').removeClass('fa-eye').addClass('fa-eye-slash');
- }
- else{
- $('#myInput').attr('type', 'password');
- $('#btnText').text('Show');
- $('#showBtn').removeClass('btn-default').addClass('btn-primary');
- $('#icon').removeClass('fa-eye-slash').addClass('fa-eye');
- }
- });
- });
- </
script
>
- </
body
>
- </
html
>
That ends this tutorial. Happy Coding :)