CODE-網頁密碼欄位的大寫鎖定鍵提醒

收到需求: 針對大小寫有別的網頁密碼欄,因使用者無法看到其所輸入字元,希望操作介面能比照Windows,在使用者按下大寫鎖定鍵(Caps Lock)時發出提醒,減少誤按導致大小寫相反的狀況。

JavaScript的按鍵事件並未提供大寫鍵資訊,要判斷得繞點路,我想到的簡便做法是透過Shift鍵旗標與輸入字母大小寫間的矛盾性加以推測(例如: 按了Shift卻輸入a-z或未按Shift卻輸入A-Z),雖無法100%掌握大寫鎖定鍵的切換時點精確反應,但多少能發揮提醒作用,勉強算是解決方案。

程式範例如下:

<!DOCTYPE html>
 
<html>
<head>
    <title>Detect Caps Lock Key</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js">  
    </script>
    <script>
        $(function () {
            $("#pwd").keypress(function (e) {
                $("#sCapsLockWarning").toggle(
                    //沒按下Shift鍵,卻輸入大寫字母
                    (e.which >= 65 && e.which <= 90 && !e.shiftKey) ||
                    //按下Shift鍵時,卻輸入小寫字母
                    (e.which >= 97 && e.which <= 122 && e.shiftKey)
                    );
            }).focusout(function () { $("#sCapsLockWarning").hide(); });
        });
    </script>
    <style>#sCapsLockWarning { font-size: 9pt; color: Red; display: none; }</style>
</head>
<body>
<input type="password" id="pwd" />
<span id="sCapsLockWarning">提醒: 密碼大小寫有別,大寫鎖定啟用中。</span>
<br />
<input type="button" id="btn" value="OK" />
</body>
</html>

歡迎推文分享:
Published 25 October 2011 07:06 AM 由 Jeffrey
Filed under: ,
Views: 12,030



意見

# 91 said on 24 October, 2011 09:57 PM

簡單易懂!

# Leo said on 24 October, 2011 11:51 PM

在 CodeProject 有個類似的做法也可以參考:

www.codeproject.com/.../Detect_Caps_Lock.aspx

# Rz said on 28 October, 2011 10:48 AM

jQuery 上有兩個外掛

plugins.jquery.com/.../caps-lock

# Jeffrey said on 28 October, 2011 09:57 PM

to Rz, 哈!! 沒想到已經有人寫成jQuery Plugin了,謝謝分享~~

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<October 2011>
SunMonTueWedThuFriSat
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication