How to add see password icon just for chrome and Firefox?
1
I implemented a see password button for my password input using html and jquery so when I run it in Microsoft Edge and IE the browsers themselves have one button as default to see password for type=password inputs. and the result will be two see password button!
Now I have 3 solution I think!
1. Disable Edge and IE see password default button (How?)
2. Disable my see password Button in Edge and IE (How?)
3. Enable same option for chrome and Firefox (How?)
the third solution is the best i think. does chrome and Firefox have default see password button? If they have how can i use them?
Here is my code:
<input type="password" class="form-control" id="password" placeholder="password " name="password">
<span class="input-group-btn">
<button id="show_password" class="btn btn-secondary" type="button" style="padding:9px;">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
</span>
<script>
$('#show_password').hover(function functionName()
//Change the attribute to text
$('#password').attr('type', 'text');
$('.glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
, function ()
//Change the attribute back to password
$('#password').attr('type', 'password');
$('.glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
);
</script>
html css
google-chrome passwords microsoft-edge edited Feb 1 '18 at 22:16
kenorb
66.2k28402394
asked Dec 17 '17 at 10:05
Iman FakhariIman Fakhari
86
add a comment |
1
I implemented a see password button for my password input using html and jquery so when I run it in Microsoft Edge and IE the browsers themselves have one button as default to see password for type=password inputs. and the result will be two see password button!
Now I have 3 solution I think!
1. Disable Edge and IE see password default button (How?)
2. Disable my see password Button in Edge and IE (How?)
3. Enable same option for chrome and Firefox (How?)
the third solution is the best i think. does chrome and Firefox have default see password button? If they have how can i use them?
Here is my code:
<input type="password" class="form-control" id="password" placeholder="password " name="password">
<span class="input-group-btn">
<button id="show_password" class="btn btn-secondary" type="button" style="padding:9px;">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
</span>
<script>
$('#show_password').hover(function functionName()
//Change the attribute to text
$('#password').attr('type', 'text');
$('.glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
, function ()
//Change the attribute back to password
$('#password').attr('type', 'password');
$('.glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
);
</script>
html css
google-chrome passwords microsoft-edge edited Feb 1 '18 at 22:16
kenorb
66.2k28402394
asked Dec 17 '17 at 10:05
Iman FakhariIman Fakhari
86
add a comment |
1
1
1
I implemented a see password button for my password input using html and jquery so when I run it in Microsoft Edge and IE the browsers themselves have one button as default to see password for type=password inputs. and the result will be two see password button!
Now I have 3 solution I think!
1. Disable Edge and IE see password default button (How?)
2. Disable my see password Button in Edge and IE (How?)
3. Enable same option for chrome and Firefox (How?)
the third solution is the best i think. does chrome and Firefox have default see password button? If they have how can i use them?
Here is my code:
<input type="password" class="form-control" id="password" placeholder="password " name="password">
<span class="input-group-btn">
<button id="show_password" class="btn btn-secondary" type="button" style="padding:9px;">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
</span>
<script>
$('#show_password').hover(function functionName()
//Change the attribute to text
$('#password').attr('type', 'text');
$('.glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
, function ()
//Change the attribute back to password
$('#password').attr('type', 'password');
$('.glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
);
</script>
html css
google-chrome passwords microsoft-edge edited Feb 1 '18 at 22:16
kenorb
66.2k28402394
asked Dec 17 '17 at 10:05
Iman FakhariIman Fakhari
86
I implemented a see password button for my password input using html and jquery so when I run it in Microsoft Edge and IE the browsers themselves have one button as default to see password for type=password inputs. and the result will be two see password button!
Now I have 3 solution I think!
1. Disable Edge and IE see password default button (How?)
2. Disable my see password Button in Edge and IE (How?)
3. Enable same option for chrome and Firefox (How?)
the third solution is the best i think. does chrome and Firefox have default see password button? If they have how can i use them?
Here is my code:
<input type="password" class="form-control" id="password" placeholder="password " name="password">
<span class="input-group-btn">
<button id="show_password" class="btn btn-secondary" type="button" style="padding:9px;">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
</span>
<script>
$('#show_password').hover(function functionName()
//Change the attribute to text
$('#password').attr('type', 'text');
$('.glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
, function ()
//Change the attribute back to password
$('#password').attr('type', 'password');
$('.glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
);
</script>
html css
google-chrome passwords microsoft-edge html css
google-chrome passwords microsoft-edge edited Feb 1 '18 at 22:16
kenorb
66.2k28402394
asked Dec 17 '17 at 10:05
Iman FakhariIman Fakhari
86
edited Feb 1 '18 at 22:16
kenorb
66.2k28402394
asked Dec 17 '17 at 10:05
Iman FakhariIman Fakhari
86
edited Feb 1 '18 at 22:16
kenorb
66.2k28402394
edited Feb 1 '18 at 22:16
kenorb
66.2k28402394
edited Feb 1 '18 at 22:16
kenorb
66.2k28402394
66.2k28402394
asked Dec 17 '17 at 10:05
Iman FakhariIman Fakhari
86
asked Dec 17 '17 at 10:05
Iman FakhariIman Fakhari
86
asked Dec 17 '17 at 10:05
Iman FakhariIman Fakhari
86
86
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
0
Just use position:absolute for view button.
div
position: relative;
display: inline-block;
input
padding-right: 2.4em;
height: 2em;
input::-ms-reveal
display: none;
span
position: absolute;
right: 1px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
span svg
background-color: white;
display: block;
padding: .2em;
width: 1.3em;
height: 1.3em;
<div>
<input type="password">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.015 7c4.751 0 8.063 3.012 9.504 4.636-1.401 1.837-4.713 5.364-9.504 5.364-4.42 0-7.93-3.536-9.478-5.407 1.493-1.647 4.817-4.593 9.478-4.593zm0-2c-7.569 0-12.015 6.551-12.015 6.551s4.835 7.449 12.015 7.449c7.733 0 11.985-7.449 11.985-7.449s-4.291-6.551-11.985-6.551zm-.015 3c-2.209 0-4 1.792-4 4 0 2.209 1.791 4 4 4s4-1.791 4-4c0-2.208-1.791-4-4-4z"/></svg>
</span>
</div>answered Dec 17 '17 at 10:17
Andrey FedorovAndrey Fedorov
2,365416
How this change can solve my problem?
– Iman Fakhari
Dec 17 '17 at 11:03
@ImanFakhari You do not need to remove the standard password display button in the browser, you need to draw your own over it. this is the solution to the problem of duplicating buttons.
– Andrey Fedorov
Dec 17 '17 at 11:30
excellent solution! but Andrey please add background-color:white for span (for whom using png) and change input padding-right to 0.because Edge icon can not locate in on padding. and making padding for input make the icon next to my image. thanks
– Iman Fakhari
Dec 17 '17 at 12:20
@ImanFakhari ok. if u no want use a google i fix this 4u.
– Andrey Fedorov
Dec 17 '17 at 13:46
No i just wanted to accept the answer. For other readers:)
– Iman Fakhari
Dec 17 '17 at 18:44
add a comment |
0
- Detect whic browser the user is using (click here)
- if it's Edge or IE, add
visibility: hidden;CSS property to your button
Code:
$('#show_password').on("mousedown", function functionName()
//Change the attribute to text
$('#password').attr('type', 'text');
$('.glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
).on("mouseup", function ()
//Change the attribute back to password
$('#password').attr('type', 'password');
$('.glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
);
var isIE = /*@cc_on!@*/false || !!document.documentMode;
var isEdge = !isIE && !!window.StyleMedia;
var showButton = !(isIE || isEdge)
if (!showButton)
document.getElementById("show_password").style.visibility = "hidden";
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>example</title>
</head>
<body>
<input type="password" class="form-control" id="password" placeholder="password " name="password">
<span class="input-group-btn">
<button id="show_password" class="btn btn-secondary" type="button" style="padding:9px;">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
</span>
</body>
</html>Hold mouse down on the button to show the password.
answered Dec 17 '17 at 12:56
GDavidGDavid
3911
Good solution. Thank you
– Iman Fakhari
Dec 17 '17 at 18:45
add a comment |
0
For a pure css version you can use the IE10+ and edge pseudo-elment ::-ms-reveal
input::-ms-reveal
display:none;
It can be use also change to change the color or background
answered Nov 12 '18 at 18:14
animalito maquinaanimalito maquina
1,16011126
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47854041%2fhow-to-add-see-password-icon-just-for-chrome-and-firefox%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Just use position:absolute for view button.
div
position: relative;
display: inline-block;
input
padding-right: 2.4em;
height: 2em;
input::-ms-reveal
display: none;
span
position: absolute;
right: 1px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
span svg
background-color: white;
display: block;
padding: .2em;
width: 1.3em;
height: 1.3em;
<div>
<input type="password">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.015 7c4.751 0 8.063 3.012 9.504 4.636-1.401 1.837-4.713 5.364-9.504 5.364-4.42 0-7.93-3.536-9.478-5.407 1.493-1.647 4.817-4.593 9.478-4.593zm0-2c-7.569 0-12.015 6.551-12.015 6.551s4.835 7.449 12.015 7.449c7.733 0 11.985-7.449 11.985-7.449s-4.291-6.551-11.985-6.551zm-.015 3c-2.209 0-4 1.792-4 4 0 2.209 1.791 4 4 4s4-1.791 4-4c0-2.208-1.791-4-4-4z"/></svg>
</span>
</div>answered Dec 17 '17 at 10:17
Andrey FedorovAndrey Fedorov
2,365416
How this change can solve my problem?
– Iman Fakhari
Dec 17 '17 at 11:03
@ImanFakhari You do not need to remove the standard password display button in the browser, you need to draw your own over it. this is the solution to the problem of duplicating buttons.
– Andrey Fedorov
Dec 17 '17 at 11:30
excellent solution! but Andrey please add background-color:white for span (for whom using png) and change input padding-right to 0.because Edge icon can not locate in on padding. and making padding for input make the icon next to my image. thanks
– Iman Fakhari
Dec 17 '17 at 12:20
@ImanFakhari ok. if u no want use a google i fix this 4u.
– Andrey Fedorov
Dec 17 '17 at 13:46
No i just wanted to accept the answer. For other readers:)
– Iman Fakhari
Dec 17 '17 at 18:44
add a comment |
0
Just use position:absolute for view button.
div
position: relative;
display: inline-block;
input
padding-right: 2.4em;
height: 2em;
input::-ms-reveal
display: none;
span
position: absolute;
right: 1px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
span svg
background-color: white;
display: block;
padding: .2em;
width: 1.3em;
height: 1.3em;
<div>
<input type="password">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.015 7c4.751 0 8.063 3.012 9.504 4.636-1.401 1.837-4.713 5.364-9.504 5.364-4.42 0-7.93-3.536-9.478-5.407 1.493-1.647 4.817-4.593 9.478-4.593zm0-2c-7.569 0-12.015 6.551-12.015 6.551s4.835 7.449 12.015 7.449c7.733 0 11.985-7.449 11.985-7.449s-4.291-6.551-11.985-6.551zm-.015 3c-2.209 0-4 1.792-4 4 0 2.209 1.791 4 4 4s4-1.791 4-4c0-2.208-1.791-4-4-4z"/></svg>
</span>
</div>answered Dec 17 '17 at 10:17
Andrey FedorovAndrey Fedorov
2,365416
How this change can solve my problem?
– Iman Fakhari
Dec 17 '17 at 11:03
@ImanFakhari You do not need to remove the standard password display button in the browser, you need to draw your own over it. this is the solution to the problem of duplicating buttons.
– Andrey Fedorov
Dec 17 '17 at 11:30
excellent solution! but Andrey please add background-color:white for span (for whom using png) and change input padding-right to 0.because Edge icon can not locate in on padding. and making padding for input make the icon next to my image. thanks
– Iman Fakhari
Dec 17 '17 at 12:20
@ImanFakhari ok. if u no want use a google i fix this 4u.
– Andrey Fedorov
Dec 17 '17 at 13:46
No i just wanted to accept the answer. For other readers:)
– Iman Fakhari
Dec 17 '17 at 18:44
add a comment |
0
0
0
Just use position:absolute for view button.
div
position: relative;
display: inline-block;
input
padding-right: 2.4em;
height: 2em;
input::-ms-reveal
display: none;
span
position: absolute;
right: 1px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
span svg
background-color: white;
display: block;
padding: .2em;
width: 1.3em;
height: 1.3em;
<div>
<input type="password">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.015 7c4.751 0 8.063 3.012 9.504 4.636-1.401 1.837-4.713 5.364-9.504 5.364-4.42 0-7.93-3.536-9.478-5.407 1.493-1.647 4.817-4.593 9.478-4.593zm0-2c-7.569 0-12.015 6.551-12.015 6.551s4.835 7.449 12.015 7.449c7.733 0 11.985-7.449 11.985-7.449s-4.291-6.551-11.985-6.551zm-.015 3c-2.209 0-4 1.792-4 4 0 2.209 1.791 4 4 4s4-1.791 4-4c0-2.208-1.791-4-4-4z"/></svg>
</span>
</div>answered Dec 17 '17 at 10:17
Andrey FedorovAndrey Fedorov
2,365416
Just use position:absolute for view button.
div
position: relative;
display: inline-block;
input
padding-right: 2.4em;
height: 2em;
input::-ms-reveal
display: none;
span
position: absolute;
right: 1px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
span svg
background-color: white;
display: block;
padding: .2em;
width: 1.3em;
height: 1.3em;
<div>
<input type="password">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.015 7c4.751 0 8.063 3.012 9.504 4.636-1.401 1.837-4.713 5.364-9.504 5.364-4.42 0-7.93-3.536-9.478-5.407 1.493-1.647 4.817-4.593 9.478-4.593zm0-2c-7.569 0-12.015 6.551-12.015 6.551s4.835 7.449 12.015 7.449c7.733 0 11.985-7.449 11.985-7.449s-4.291-6.551-11.985-6.551zm-.015 3c-2.209 0-4 1.792-4 4 0 2.209 1.791 4 4 4s4-1.791 4-4c0-2.208-1.791-4-4-4z"/></svg>
</span>
</div>div
position: relative;
display: inline-block;
input
padding-right: 2.4em;
height: 2em;
input::-ms-reveal
display: none;
span
position: absolute;
right: 1px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
span svg
background-color: white;
display: block;
padding: .2em;
width: 1.3em;
height: 1.3em;
<div>
<input type="password">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.015 7c4.751 0 8.063 3.012 9.504 4.636-1.401 1.837-4.713 5.364-9.504 5.364-4.42 0-7.93-3.536-9.478-5.407 1.493-1.647 4.817-4.593 9.478-4.593zm0-2c-7.569 0-12.015 6.551-12.015 6.551s4.835 7.449 12.015 7.449c7.733 0 11.985-7.449 11.985-7.449s-4.291-6.551-11.985-6.551zm-.015 3c-2.209 0-4 1.792-4 4 0 2.209 1.791 4 4 4s4-1.791 4-4c0-2.208-1.791-4-4-4z"/></svg>
</span>
</div>div
position: relative;
display: inline-block;
input
padding-right: 2.4em;
height: 2em;
input::-ms-reveal
display: none;
span
position: absolute;
right: 1px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
span svg
background-color: white;
display: block;
padding: .2em;
width: 1.3em;
height: 1.3em;
<div>
<input type="password">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.015 7c4.751 0 8.063 3.012 9.504 4.636-1.401 1.837-4.713 5.364-9.504 5.364-4.42 0-7.93-3.536-9.478-5.407 1.493-1.647 4.817-4.593 9.478-4.593zm0-2c-7.569 0-12.015 6.551-12.015 6.551s4.835 7.449 12.015 7.449c7.733 0 11.985-7.449 11.985-7.449s-4.291-6.551-11.985-6.551zm-.015 3c-2.209 0-4 1.792-4 4 0 2.209 1.791 4 4 4s4-1.791 4-4c0-2.208-1.791-4-4-4z"/></svg>
</span>
</div>answered Dec 17 '17 at 10:17
Andrey FedorovAndrey Fedorov
2,365416
edited Dec 17 '17 at 13:43
answered Dec 17 '17 at 10:17
Andrey FedorovAndrey Fedorov
2,365416
answered Dec 17 '17 at 10:17
Andrey FedorovAndrey Fedorov
2,365416
answered Dec 17 '17 at 10:17
Andrey FedorovAndrey Fedorov
2,365416
2,365416
How this change can solve my problem?
– Iman Fakhari
Dec 17 '17 at 11:03
@ImanFakhari You do not need to remove the standard password display button in the browser, you need to draw your own over it. this is the solution to the problem of duplicating buttons.
– Andrey Fedorov
Dec 17 '17 at 11:30
excellent solution! but Andrey please add background-color:white for span (for whom using png) and change input padding-right to 0.because Edge icon can not locate in on padding. and making padding for input make the icon next to my image. thanks
– Iman Fakhari
Dec 17 '17 at 12:20
@ImanFakhari ok. if u no want use a google i fix this 4u.
– Andrey Fedorov
Dec 17 '17 at 13:46
No i just wanted to accept the answer. For other readers:)
– Iman Fakhari
Dec 17 '17 at 18:44
add a comment |
How this change can solve my problem?
– Iman Fakhari
Dec 17 '17 at 11:03
@ImanFakhari You do not need to remove the standard password display button in the browser, you need to draw your own over it. this is the solution to the problem of duplicating buttons.
– Andrey Fedorov
Dec 17 '17 at 11:30
excellent solution! but Andrey please add background-color:white for span (for whom using png) and change input padding-right to 0.because Edge icon can not locate in on padding. and making padding for input make the icon next to my image. thanks
– Iman Fakhari
Dec 17 '17 at 12:20
@ImanFakhari ok. if u no want use a google i fix this 4u.
– Andrey Fedorov
Dec 17 '17 at 13:46
No i just wanted to accept the answer. For other readers:)
– Iman Fakhari
Dec 17 '17 at 18:44
How this change can solve my problem?
– Iman Fakhari
Dec 17 '17 at 11:03
How this change can solve my problem?
– Iman Fakhari
Dec 17 '17 at 11:03
@ImanFakhari You do not need to remove the standard password display button in the browser, you need to draw your own over it. this is the solution to the problem of duplicating buttons.
– Andrey Fedorov
Dec 17 '17 at 11:30
@ImanFakhari You do not need to remove the standard password display button in the browser, you need to draw your own over it. this is the solution to the problem of duplicating buttons.
– Andrey Fedorov
Dec 17 '17 at 11:30
excellent solution! but Andrey please add background-color:white for span (for whom using png) and change input padding-right to 0.because Edge icon can not locate in on padding. and making padding for input make the icon next to my image. thanks
– Iman Fakhari
Dec 17 '17 at 12:20
excellent solution! but Andrey please add background-color:white for span (for whom using png) and change input padding-right to 0.because Edge icon can not locate in on padding. and making padding for input make the icon next to my image. thanks
– Iman Fakhari
Dec 17 '17 at 12:20
@ImanFakhari ok. if u no want use a google i fix this 4u.
– Andrey Fedorov
Dec 17 '17 at 13:46
@ImanFakhari ok. if u no want use a google i fix this 4u.
– Andrey Fedorov
Dec 17 '17 at 13:46
No i just wanted to accept the answer. For other readers:)
– Iman Fakhari
Dec 17 '17 at 18:44
No i just wanted to accept the answer. For other readers:)
– Iman Fakhari
Dec 17 '17 at 18:44
add a comment |
0
- Detect whic browser the user is using (click here)
- if it's Edge or IE, add
visibility: hidden;CSS property to your button
Code:
$('#show_password').on("mousedown", function functionName()
//Change the attribute to text
$('#password').attr('type', 'text');
$('.glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
).on("mouseup", function ()
//Change the attribute back to password
$('#password').attr('type', 'password');
$('.glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
);
var isIE = /*@cc_on!@*/false || !!document.documentMode;
var isEdge = !isIE && !!window.StyleMedia;
var showButton = !(isIE || isEdge)
if (!showButton)
document.getElementById("show_password").style.visibility = "hidden";
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>example</title>
</head>
<body>
<input type="password" class="form-control" id="password" placeholder="password " name="password">
<span class="input-group-btn">
<button id="show_password" class="btn btn-secondary" type="button" style="padding:9px;">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
</span>
</body>
</html>Hold mouse down on the button to show the password.
answered Dec 17 '17 at 12:56
GDavidGDavid
3911
Good solution. Thank you
– Iman Fakhari
Dec 17 '17 at 18:45
add a comment |
0
- Detect whic browser the user is using (click here)
- if it's Edge or IE, add
visibility: hidden;CSS property to your button
Code:
$('#show_password').on("mousedown", function functionName()
//Change the attribute to text
$('#password').attr('type', 'text');
$('.glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
).on("mouseup", function ()
//Change the attribute back to password
$('#password').attr('type', 'password');
$('.glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
);
var isIE = /*@cc_on!@*/false || !!document.documentMode;
var isEdge = !isIE && !!window.StyleMedia;
var showButton = !(isIE || isEdge)
if (!showButton)
document.getElementById("show_password").style.visibility = "hidden";
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>example</title>
</head>
<body>
<input type="password" class="form-control" id="password" placeholder="password " name="password">
<span class="input-group-btn">
<button id="show_password" class="btn btn-secondary" type="button" style="padding:9px;">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
</span>
</body>
</html>Hold mouse down on the button to show the password.
answered Dec 17 '17 at 12:56
GDavidGDavid
3911
Good solution. Thank you
– Iman Fakhari
Dec 17 '17 at 18:45
add a comment |
0
0
0
- Detect whic browser the user is using (click here)
- if it's Edge or IE, add
visibility: hidden;CSS property to your button
Code:
$('#show_password').on("mousedown", function functionName()
//Change the attribute to text
$('#password').attr('type', 'text');
$('.glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
).on("mouseup", function ()
//Change the attribute back to password
$('#password').attr('type', 'password');
$('.glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
);
var isIE = /*@cc_on!@*/false || !!document.documentMode;
var isEdge = !isIE && !!window.StyleMedia;
var showButton = !(isIE || isEdge)
if (!showButton)
document.getElementById("show_password").style.visibility = "hidden";
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>example</title>
</head>
<body>
<input type="password" class="form-control" id="password" placeholder="password " name="password">
<span class="input-group-btn">
<button id="show_password" class="btn btn-secondary" type="button" style="padding:9px;">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
</span>
</body>
</html>Hold mouse down on the button to show the password.
answered Dec 17 '17 at 12:56
GDavidGDavid
3911
- Detect whic browser the user is using (click here)
- if it's Edge or IE, add
visibility: hidden;CSS property to your button
Code:
$('#show_password').on("mousedown", function functionName()
//Change the attribute to text
$('#password').attr('type', 'text');
$('.glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
).on("mouseup", function ()
//Change the attribute back to password
$('#password').attr('type', 'password');
$('.glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
);
var isIE = /*@cc_on!@*/false || !!document.documentMode;
var isEdge = !isIE && !!window.StyleMedia;
var showButton = !(isIE || isEdge)
if (!showButton)
document.getElementById("show_password").style.visibility = "hidden";
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>example</title>
</head>
<body>
<input type="password" class="form-control" id="password" placeholder="password " name="password">
<span class="input-group-btn">
<button id="show_password" class="btn btn-secondary" type="button" style="padding:9px;">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
</span>
</body>
</html>Hold mouse down on the button to show the password.
$('#show_password').on("mousedown", function functionName()
//Change the attribute to text
$('#password').attr('type', 'text');
$('.glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
).on("mouseup", function ()
//Change the attribute back to password
$('#password').attr('type', 'password');
$('.glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
);
var isIE = /*@cc_on!@*/false || !!document.documentMode;
var isEdge = !isIE && !!window.StyleMedia;
var showButton = !(isIE || isEdge)
if (!showButton)
document.getElementById("show_password").style.visibility = "hidden";
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>example</title>
</head>
<body>
<input type="password" class="form-control" id="password" placeholder="password " name="password">
<span class="input-group-btn">
<button id="show_password" class="btn btn-secondary" type="button" style="padding:9px;">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
</span>
</body>
</html>$('#show_password').on("mousedown", function functionName()
//Change the attribute to text
$('#password').attr('type', 'text');
$('.glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
).on("mouseup", function ()
//Change the attribute back to password
$('#password').attr('type', 'password');
$('.glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
);
var isIE = /*@cc_on!@*/false || !!document.documentMode;
var isEdge = !isIE && !!window.StyleMedia;
var showButton = !(isIE || isEdge)
if (!showButton)
document.getElementById("show_password").style.visibility = "hidden";
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>example</title>
</head>
<body>
<input type="password" class="form-control" id="password" placeholder="password " name="password">
<span class="input-group-btn">
<button id="show_password" class="btn btn-secondary" type="button" style="padding:9px;">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
</span>
</body>
</html>answered Dec 17 '17 at 12:56
GDavidGDavid
3911
answered Dec 17 '17 at 12:56
GDavidGDavid
3911
answered Dec 17 '17 at 12:56
GDavidGDavid
3911
answered Dec 17 '17 at 12:56
GDavidGDavid
3911
3911
Good solution. Thank you
– Iman Fakhari
Dec 17 '17 at 18:45
add a comment |
Good solution. Thank you
– Iman Fakhari
Dec 17 '17 at 18:45
Good solution. Thank you
– Iman Fakhari
Dec 17 '17 at 18:45
Good solution. Thank you
– Iman Fakhari
Dec 17 '17 at 18:45
add a comment |
0
For a pure css version you can use the IE10+ and edge pseudo-elment ::-ms-reveal
input::-ms-reveal
display:none;
It can be use also change to change the color or background
answered Nov 12 '18 at 18:14
animalito maquinaanimalito maquina
1,16011126
add a comment |
0
For a pure css version you can use the IE10+ and edge pseudo-elment ::-ms-reveal
input::-ms-reveal
display:none;
It can be use also change to change the color or background
answered Nov 12 '18 at 18:14
animalito maquinaanimalito maquina
1,16011126
add a comment |
0
0
0
For a pure css version you can use the IE10+ and edge pseudo-elment ::-ms-reveal
input::-ms-reveal
display:none;
It can be use also change to change the color or background
answered Nov 12 '18 at 18:14
animalito maquinaanimalito maquina
1,16011126
For a pure css version you can use the IE10+ and edge pseudo-elment ::-ms-reveal
input::-ms-reveal
display:none;
It can be use also change to change the color or background
answered Nov 12 '18 at 18:14
animalito maquinaanimalito maquina
1,16011126
answered Nov 12 '18 at 18:14
animalito maquinaanimalito maquina
1,16011126
answered Nov 12 '18 at 18:14
animalito maquinaanimalito maquina
1,16011126
answered Nov 12 '18 at 18:14
animalito maquinaanimalito maquina
1,16011126
1,16011126
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47854041%2fhow-to-add-see-password-icon-just-for-chrome-and-firefox%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
