參考：https://blog.csdn.net/ansheng02/article/details/84637356?tdsourcetag=s_pctim_aiomsg
思路：
①使用隱藏的input獲取輸入的密碼內容，並根據輸入內容判斷密碼的長度進而展示*的個數；
②使用li展示樣式；
完善了原文章沒有做密碼長度限制爲6位數及密碼選中效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>支付密碼輸入框</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
ul,li{
list-style: none;
}
.password-div input{
width: 1px;
height: 1px;
opacity: 0;
border: 0;
}
.password-lable{
height: 30px;
clear: both;
}
.password-lable li{
float: left;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #dedede;
margin-left: -1px;
border-left-color: transparent;
}
.password-lable li:nth-child(1) {
border-left-color: #dedede;
}
.active {
border-color: #1aabeb!important;
}
</style>
</head>
<body>
<div class="password-div">
<div class="password-div password-lable">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<input id="PayPassword" type="password" name="password" maxlength="6">
</div>
</div>
</body>
</html>
<script type="text/javascript">
$("#PayPassword").on("input", function(e){
var pw = $(this).val();
var pwLength = pw.length;
var list = $(".password-div ul li");
list.text("");
if( pwLength <= 6) {
for(var i = 0; i < pwLength ; i++){
list.removeClass("active");
$(list[i]).text("*").addClass("active");
};
}
});
$(".password-div ul").click(function(){
$("#PasswordActive").attr("class", "active");
$("#PayPassword").val("");
$("#PayPassword").focus();
$(".password-div ul li").text("");
});
$("#PayPassword").blur(function() {
$(".password-div ul li").removeClass("active");
});
</script>