js点击显示隐藏密码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>look</title>
<style>
    .ico{
        height:30px;
        width:34px;
        background:url(images/ico.jpg) no-repeat -67px 0px;
        position:absolute;
        top:10px;
        left:8.5%;
        opacity:0.7;
        }
    #in{ display:block;
        height:30px;
        width:10%;}
</style>
</head>

<body>
<input type="password" id="in" />
<img class="ico" id="ico" onclick="xs()" title="显示密码"/>

<script>
    function xs(){
        //var a = document.getElementById("inp").value;
        var aa=document.getElementById("ico").title;
        //alert();
        if(aa == "隐藏密码"){
            document.getElementById("in").type="password";
            document.getElementById("ico").title = "显示密码";
            document.getElementById("ico").style="background:url(images/ico.jpg) no-repeat -67px 0px;";
        }else{
            document.getElementById("ico").title = "隐藏密码";
            document.getElementById("in").type="text";
            document.getElementById("ico").style="background:url(images/ico.jpg) no-repeat -111px 0px;";
        }

        }
</script>
</body>
</html>

时间： 2024-10-06 15:53:39

js点击显示隐藏密码的相关文章

HTML5--》点击显示隐藏内容

<details>浏览器支持比较差,可以用JavaScript实现这种功能. 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>js点击显示隐藏内容</title> 6 <style type="text/css" > 7 body{font-size:12px;} 8 span{f

input 显示/隐藏密码

js代码: // 显示/隐藏密码 $('.open').on('click',function(){ if($("#psw").prop('type')=='password'){ $("#psw").prop('type','text'); }else{ $("#psw").prop('type','password'); } });

js 事件点击显示隐藏

1 <div style="position:absolute;left:40%;top:10%;border-style:dotted"> 2 <img src="zgl.jpg"/><br/> 3 <center> 4 <input type="button" value="隐藏"/> 5 6 <input type="button&qu

jquery点击显示隐藏的三种方法,从复杂到简单.使用jquery需要引用jquery库,如右所示<script src="jquery-1.11.3.min.js"type="text/javascript"></script>. 旁边按钮随着收缩展开发生状态变化,展开+变—,收缩—变+. 收缩效果: 展开效果: 一.HTML结构(盗用网上的) <body> <li class=&

checkbox选中selec才可选和显示隐藏密码

学了一个多月,感觉真正开始理解点js了,现在功能都能自己写出来不用问别人,比较开心啦! 1 checkbox选中selec才可选,否则禁用 document.addEventListener('click',function(evt){ if(evt.target.matches("#check")) { var checkbox = document.getElementById("check"); //checkbox if(checkbox.checked==

锋利的Jquery(点击显示隐藏div)

点击显示隐藏div 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text

css样式一开始不显示，点击显示隐藏

先隐藏在字段里写style="display:none" 点击显示隐藏 $(".a").click(function(){ if($("#aa").css("display")=="none"){ $("#aa").show(); }else{ $("#aa").hide(); } }); 替换属性先设置好class名字 $("#btn2").a

jquery点击显示隐藏块

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击显示块</title> <script src="script/jquery-2.1.4.js"></script> //引入jquery模块 <style>

vue+element-ui实现显示隐藏密码

<template> <el-form :model="cuser_info" label-width="115px" label-position="left" > <el-row :gutter="20"> <el-col :span="24"> <el-form-item v-if="visible2" label="