js实现密码框的点击眼睛的显示与隐藏

密码框的点击眼睛的显示与隐藏,图标引用是bootstrap中的fontawesome
(复制整个 font-awesome 文件夹到您的项目中)
还需要引入
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Font-Awesome/css/font-awesome.min.css">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>密码框</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Font-Awesome/css/font-awesome.min.css">
</head>
<body>
<div class="content">
<div class="input_block">
<i class="fa fa-eye" onclick="hideShowPsw()" id="eye"></i>
<input type="password" id="password" placeholder="密码"/>
</div>
</div>
<script type="text/javascript">
var eye = document.getElementById("eye");
var password = document.getElementById("password");
//隐藏text block,显示password block
function hideShowPsw(){
if (password.type == "password") {
password.type = "text";
eye.className=‘fa fa-eye-slash‘
}else {
password.type = "password";
eye.className=‘fa fa-eye‘
}
}
</script>
</body>
</html>

原文地址:http://blog.51cto.com/12885303/2137186

时间: 2024-10-09 09:09:39

js实现密码框的点击眼睛的显示与隐藏的相关文章

jS实现文本框在点击时变色

jS实现文本框在点击时变色 网页上默认的文本框老是灰色风格,看的都有点不耐烦了,用CSS和JS改变其样式是大家都喜欢用的方法,今天写了一个点击边框变色的文本框,鼠标点击文本框将要输入的时候,文本框自动变色高亮显示,非常有视觉效果,让文本框变漂亮了许多.HTML代码如下: 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

李洪强iOS开发之-实现点击单行View显示和隐藏Cell

李洪强iOS开发之-实现点击单行View显示和隐藏Cell 实现的效果:  ....

js关于密码框强弱度的提示

三种密码强度的正则表达式: 较弱:全是数字或全是字母 6-16个字符:/^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/; 中级:数字.26个英文字母 6-16个字符: /^[A-Za-z0-9]{6,16}$/;  较高:由数字.26个英文字母或者下划线组成的字符串 6-16个字符: /^\w{6,16}$/;  html部分: 密码框:<input id = "myinput" type="text" maxlength="16&q

点击同一处显示与隐藏

HTML <a href="javascript:void()" onclick="show()">点击此处显示或隐藏</a> <div id="hoary" style="display:none">可以隐身可以显示.</div> JS <script type="text/javascript"> function show(){ docume

利用java ajax以及js实现input框的模糊匹配下拉显示

前台jsp: <input type="text" name="bigCategoryName" id="bigCategoryName" AutoComplete="off" value="${bigCategoryName}" style="width:150px" maxlength="20" list="second" oninput

封装一个tab思想方法实现点击的时候显示或隐藏效果

代码实现: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> tab方法 </TITLE> <meta charset="utf-8" /> <script src="jquery-1.11.3.min.js"></script> &

小程序之按钮点击之后,显示和隐藏切换

wxml <navigator bindtap='share' hover-class="none"> <view class=''>分享乐活 <image class='fr' src='/img/arrorw.png'></image> </view> </navigator> <view class='share' wx:if="{{shareshow}}"> <view

倒计时、点击移动变色与注册时,JS验证密码是否正确

<input id="b1" type="button" value="同意(10)" disabled="disabled" /> <script type="text/javascript"> var t = 10; var aa = window.setInterval('a()', 1000); function a() { var b = document.getEleme

JS控制文本框中的密码显示/隐藏功能

<html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <style> body,input{font:menu} </style> </head> <body> <form method="POST" action="addcheck.asp" name="forms&