如何實現密碼輸入框focus狀態彈出提示信息用css製做空心箭頭(上下左右各個方向均有)

時間 2019-12-12

標籤如何實現密碼輸入 focus 狀態彈出提示信息 css 製做空心箭頭上下左右各個方向均有欄目 CSS 简体版

原文原文鏈接

1、密碼輸入提示框樣式實現javascript

效果圖以下：css

源碼以下：html

<html>
<style type="text/css">
*{
    padding: 0;
    margin:0;
}
.pwd_content{
    position:relative;
    top:100px;
}
.pwd_tips{
    width: 140px;
    position: absolute;
    left: 230px;
    top: -20px;
    border: 1px solid #c2c2c2;
    padding: 5px;
    font-size: 12px;
    color:#666;
    font-weight: normal;
    display:none;
}
.arrow1, .arrow2{
    position: absolute;
    left: -13px;
    top: 25px;
    border-top: 6px transparent dashed;
    border-left: 6px transparent dashed;
    border-bottom: 6px transparent dashed;
    border-right: 6px solid #c2c2c2;
}

.arrow2{
           left: -12px;/*這裏很重要,至關於比原來的三角右移了一個像素*/
            border-right: 6px white solid;/*用白色的三角覆蓋掉灰色的三角*/
 }

.pwd_tips .pwd_tip1, .pwd_tips .pwd_tip2{
    padding-left:16px;
}

.pwd_tips .point{
    position: absolute;
    left: 4px;
    margin-top: 4px;
    font-size: 40px;
    line-height: 12px;
}
</style>
<body>
    <div  class="pwd_content">
        <label for="passwd">密碼：</label>
        <input type="password" name="passwd" id="passwd">
        <div  class="pwd_tips" id="pwd_tips">
            <span class="arrow1"></span>
            <span class="arrow2"></span>
            <p class="pwd_tip1"><span class="point">· </span>密碼長度至少8個字符</p>
            <p class="pwd_tip2"><span class="point">· </span>包含數字，大小寫字母和特殊字符其中的三種</p>
        </div>
    </div>
</body>
<script type="text/javascript">
    function passwd_init(){
        document.getElementById("passwd").addEventListener("focus", function(){
            document.getElementById("pwd_tips").style.display =  "block";
        })
        document.getElementById("passwd").addEventListener("blur", function(){
            document.getElementById("pwd_tips").style.display =  "none";
        })
    }
    passwd_init();
</script>
</html>

空心箭頭實現參考：用css製做空心箭頭(上下左右各個方向均有)java

注：關於文字換行對齊的實現的另外一種方法：效果圖：jquery

代碼實現：ide

<html>
<head>
<style>
    .point{
        display:inline-block;
        width：5%;
        margin-top: -6px;
    }
    .cont{
        display:inline-block;
        width:95%;
        vertical-align:top;
    }
</style>
</head>
<body>
    <div style="width:300px;border:1px solid #ff5500;">
        <p><span class="point">.</span><span class="cont">密碼長度至少8個字符</span></p>
        <p><span class="point">.</span><span class="cont">包含數字，大小寫字母和特殊字符其中的三種</span></p>
    </div>
</body>
</html>

View Code

關鍵點：設置.cont的樣式爲inline-block，行內塊級是使文字與點同一行且文字做爲一個總體靠左對齊的關鍵。若按默認inline則第二行的文字會跟點對齊。post

2、通常密碼校驗及報錯實現this

功能點：url

1.密碼格式要求：spa

2.用戶點擊提交時進行校驗，若首次輸入的密碼格式不對，顯示錯誤提示同時明文顯示密碼便可，再也不進行兩次密碼的一致性校驗。

3.若第一遍輸入的密碼格式正確，再進行判斷兩次輸入的密碼是否一致，不一致則報錯同時明文顯示密碼。

樣式效果圖：

正在輸入密碼時：

正在輸入確認密碼時：

密碼格式不對時，單擊submit的響應樣式：

兩次密碼不同時，單擊submit的響應樣式：

源碼實現：

<html>
<style type="text/css">
*{
    padding: 0;
    margin:0;
}
label{
    display:inline-block;
}
.content{
    position:relative;
    top:100px;
}
.pwd_content{
    padding-top:20px;
    padding-bottom: 20px;
}
.pwd_tips{
    width: 140px;
    position: absolute;
    left: 260px;
        top: 22px;
    border: 1px solid #c2c2c2;
    padding: 5px;
    font-size: 12px;
    color:#666;
    font-weight: normal;
    display:none;
}
.arrow1, .arrow2{
    position: absolute;
    left: -13px;
    top: 25px;
    border-top: 6px transparent dashed;
    border-left: 6px transparent dashed;
    border-bottom: 6px transparent dashed;
    border-right: 6px solid #c2c2c2;
}

.arrow2{
           left: -12px;/*這裏很重要,至關於比原來的三角右移了一個像素*/
            border-right: 6px white solid;/*用白色的三角覆蓋掉灰色的三角*/
 }

.pwd_tips .pwd_tip1, .pwd_tips .pwd_tip2{
    padding-left:16px;
}

.pwd_tips .point{
    position: absolute;
    left: 4px;
    margin-top: 4px;
    font-size: 40px;
    line-height: 12px;
}

label.error {
    color: #e81123;
    display: inline-block;
    margin-left: 10px;
 }


</style>
<body>
    <div class="content">
        <div>
                    <label style="width:80px;" for="updateType0">用戶名</label>
                    <input type="text"  value="Administrator" readonly/>
              </div>
        <div  class="pwd_content">
            <label style="width:80px;" for="passwd">密碼：</label>
            <input type="password" name="passwd" id="passwd">
            <label for="passwd" class="error" style="display:none">密碼不符合規範</label>
            <div  class="pwd_tips" id="pwd_tips">
                <span class="arrow1"></span>
                <span class="arrow2"></span>
                <p class="pwd_tip1"><span class="point">· </span>密碼長度至少8個字符</p>
                <p class="pwd_tip2"><span class="point">· </span>包含數字，大小寫字母和特殊字符其中的三種</p>
            </div>
        </div>
        <div>
                    <label style="width:80px;" for="passwd_confirm">確認密碼：</label>
                    <input type="password" name="passwd_confirm" id="passwd_confirm">
                    <label for="passwd_confirm" class="error" style="display:none">兩次密碼不一致</label>
                </div>
                <button style="margin-top:20px;" id="submit">submit</button>
    </div>
</body>
<script src="js/libs/jquery.min.js"></script>
<script type="text/javascript">
    String.prototype.isValidPW = function(){   
    // First, check for at least 8 characters
    if (this.length < 8) return false;

    // next, check that we have at least 3 matches
    var re = [/\d/, /[A-Z]/, /[a-z]/, /[!@#$%&\/=?_.,:;-]/], m = 0;
    for (var r = 0; r < re.length; r++){
        if ((this.match(re[r]) || []).length > 0) m++;
    }
    return m >= 3;
    };

    function passwd_init(){
        document.getElementById("passwd").addEventListener("focus", function(){
            document.getElementById("pwd_tips").style.display =  "block";
        })
        document.getElementById("passwd").addEventListener("blur", function(){
            document.getElementById("pwd_tips").style.display =  "none";
        })
    }
    passwd_init();
    function passwd_check() { 
        if(!$("#passwd").val().isValidPW()){
            $("label[for='passwd'].error").show();
            $("#passwd").attr('type',"text");
            document.getElementById("passwd").addEventListener("focus", function(){
                $("label[for='passwd'].error").hide();
                $("#passwd").attr('type',"password");     
            })
            return false;
        }
        if($("#passwd").val().trim() != $("#passwd_confirm").val().trim()) {
            $("label[for='passwd_confirm'].error").show();
            $("#passwd").attr('type',"text");
            $("#passwd_confirm").attr('type',"text");
            document.getElementById("passwd_confirm").addEventListener("focus", function(){
                $("label[for='passwd_confirm'].error").hide();  
                $("#passwd").attr('type',"password");
                $("#passwd_confirm").attr('type',"password");   
            })
            return false;
        }
        return true;
    }
    document.getElementById("submit").addEventListener("click", passwd_check);

</script>
</html>