jquery控制文本框输入密码时有短暂的显示过程

1、新建html文档。

2、书写hmtl代码。

<div class="headerBox">

  <h1>登录页面</h1>

</div>

<div class="loginBox">

  <h1>登录页面</h1>

  <div class="inputBox">

    <label for="demo1">名称</label>

    <input id="demo1" name="demo1" type="text" value="" />

  </div>

  <div class="inputBox">

    <label for="demo2">密码</label>

    <input id="demo2" name="demo2" type="password" value="" />

  </div>

  <button>登录</button>

</div>

3、书写css代码。

body { background: #C3CAD0; font-family: Tahoma, Geneva, sans-serif; font-size: 16px; }

.headerBox { color: #F9FAFA; text-align: center; text-shadow: 1px 1px 1px #3A4868; }

.loginBox { background: #5C6982; border: solid 4px #65728A; -moz-border-radius: 8px; -border-radius: 8px; border-radius: 8px; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px 4px 10px rgba(0, 0, 0, 0.2); -box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px 4px 10px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px 4px 10px rgba(0, 0, 0, 0.2); margin: auto auto 8px auto; padding: 20px; width: 340px; }

.loginBox h1 { color: #F9FAFA; font-size: 20px; font-weight: bold; margin: 0 0 12px 0; padding: 0px 8px 8px 8px; text-shadow: 1px 1px 1px #3A4868; }

.inputBox { background: #FFF; border: solid 2px #FFF; -moz-border-radius: 5px; -border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px 2px 4px rgba(0, 0, 0, 0.15); -box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px 2px 4px rgba(0, 0, 0, 0.15); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px 2px 4px rgba(0, 0, 0, 0.15); margin: 5px auto 5px auto; padding: 8px; width: 300px; }

.inputBox label { font-weight: bold; display: inline-block; text-shadow: 1px 1px 1px #F3F4F6; }

.inputBox input { background: transparent; border: none; color: #35455F; font-family: Tahoma, Geneva, sans-serif; font-size: 16px; outline: none; padding: 5px; width: 200px; }

button { color: #FFF; cursor: pointer; background: #000; border: solid 2px #000; -moz-border-radius: 5px; -border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px -2px 6px rgba(255, 255, 255, 0.15); -box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px -2px 6px rgba(255, 255, 255, 0.15); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px -2px 6px rgba(255, 255, 255, 0.15); display: block; font-family: Tahoma, Geneva, sans-serif; font-size: 16px; font-weight: bold; margin: 5px auto 5px auto; padding: 8px; position: relative; width: 150px; }

button:hover, button:active { background: #101010; border: solid 2px #101010; -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4), inset 0px -2px 6px rgba(255, 255, 255, 0.15); -box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4), inset 0px -2px 6px rgba(255, 255, 255, 0.15); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4), inset 0px -2px 6px rgba(255, 255, 255, 0.15); }

button:active { top: 1px; }

4、书写并添加js代码。

<script src="js/jquery.min.js"></script>

<script src="js/iPass.packed.js"></script>

<script>

$(document).ready(function(){

$("input[type=password]").iPass();

$("button").click(function() {

alert("Password: "+$("#demo2").val());

})

});

</script>

5、代码整体结构。

6、查看效果。