用JavaScript檢查大寫鍵（Caps Lock）是否打開的腳本

更新時間：2007年06月29日 00:00:00 作者：

在用戶遇到需要輸入密碼的頁面時候，密碼中是否有大寫字母？大寫鍵（Caps Lock）是否打開？如果能給用戶以提示，豈不是更好？

下面的示例代碼給出了方法，必要的說明代碼當(dāng)中都有注釋。
問中知識點：event.keyCode 和 event.shiftKey

代碼

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   <HTML>   <HEAD>   <TITLE>  Detect Caps Lock </TITLE>   <script>   function  detectCapsLock(e){     valueCapsLock  =  e.keyCode ? e.keyCode:e.which; // Caps Lock　是否打開      valueShift  =  e.shiftKey ? e.shiftKey:((valueCapsLock  ==   16 ) ? true : false ); // shift鍵是否按住      if (((valueCapsLock >=   65   &&  valueCapsLock  <=   90 )  &&   ! valueShift) // Caps Lock 打開，并且 shift鍵沒有按住       || ((valueCapsLock >=   97   &&  valueCapsLock  <=   122 )  &&  valueShift)) // Caps Lock 打開，并且按住 shift鍵          document.getElementById('capStatus').style.visibility  =  'visible';      else          document.getElementById('capStatus').style.visibility  =  'hidden';    /*    javascript中keyCode代碼對應(yīng)表   event.keyCode=32        空格   event.keyCode=13        回車   event.keyCode=27        Esc   event.keyCode=16)        Shift   event.keyCode=17)        Ctrl   event.keyCode=18)        Alt    */   }  </script>   </HEAD>   <BODY>   <input  type ="password"  name ="pwd"  onkeypress ="detectCapsLock(event)"   />   <div  id ="capStatus"  style ="visibility:hidden"><font  color =red> Caps Lock is on. <font></div>   </BODY>   </HTML>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

原文：http://www.blogjava.net/majianan/archive/2007/02/01/97284.html

您可能感興趣的文章:

相關(guān)文章

js判斷一個對象是數(shù)組（函數(shù)）的方法實例
這篇文章主要給大家介紹了關(guān)于利用js如何判斷一個對象是數(shù)組（函數(shù)）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
Bootstrap按鈕下拉菜單組件詳解
這篇文章主要為大家詳細(xì)介紹了Bootstrap按鈕下拉菜單組件，感興趣的小伙伴們可以參考一下
2016-05-05
微信小程序數(shù)據(jù)劫持代理的實現(xiàn)
本文主要介紹了微信小程序?數(shù)據(jù)劫持代理的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
javascript 獲取HTMl文件指定元素的代碼
獲取HTMl文件制定的元素的實現(xiàn)代碼，需要的朋友可以參考下。
2010-04-04
深入淺析Extjs中store分組功能的使用方法
這篇文章主要介紹了深入淺析Extjs中store分組功能的使用方法的相關(guān)資料,需要的朋友可以參考下
2016-04-04
javascript實現(xiàn)移動端 HTML5 圖片上傳預(yù)覽和壓縮功能示例
這篇文章主要介紹了javascript實現(xiàn)移動端 HTML5 圖片上傳預(yù)覽和壓縮功能,結(jié)合實例形式分析了javascript移動端 HTML5 圖片上傳預(yù)覽和壓縮功能具體實現(xiàn)方法與操作注意事項,需要的朋友可以參考下
2020-05-05
JavaScript中的數(shù)組特性介紹
這篇文章主要介紹了JavaScript中的數(shù)組特性介紹,本文總結(jié)了數(shù)組的3種特性和4種創(chuàng)建數(shù)組的方法,需要的朋友可以參考下
2014-12-12
three.js中點對象(Point)和點材質(zhì)(PointsMaterial)的具體使用
本文主要介紹了three.js中點對象(Point)和點材質(zhì)(PointsMaterial)的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
微信小程序身份證驗證方法實現(xiàn)詳解
這篇文章主要介紹了微信小程序身份證驗證方法實現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-06-06
JavaScript中的迭代器和生成器詳解
這篇文章主要介紹了JavaScript中的迭代器和生成器詳解,本文講解了迭代器、聲明自定義迭代器、生成器：一種更好的方式來構(gòu)建迭代器、生成器高級特性等內(nèi)容,需要的朋友可以參考下
2014-10-10