大写锁定脚本清理答案

【问题标题】：Caps Lock script cleanup大写锁定脚本清理
【发布时间】：2009-12-29 03:28:20
【问题描述】：

如果可能的话，我想知道是否有人可以帮助我清理这段代码；包括将两个功能合二为一。我是 javascript 新手，所以我真的需要一些帮助。

我能够让这个脚本运行得很好，我只是想知道它是否可以改进和/或是否有任何我忽略的问题。

脚本首先根据按键确定大写锁定是打开还是关闭。一旦确定了大写锁定状态，按下大写锁定键即可打开或关闭大写锁定警告消息。

<script language="javascript">

//Caps Lock Warning
var onOff = "";
function capLock(e){
var kc = e.keyCode?e.keyCode:e.which;
var sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
var cl = document.getElementById('cl');

if(onOff == ""){

//Checks if caps lock is on.
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
{
cl.style.visibility = 'visible'; 
onOff = "on"; 
} 
//Checks if caps lock is off.    
else if(((kc >= 65 && kc <= 90) && sk)||((kc >= 97 && kc <= 122) && !sk))
{
cl.style.visibility = 'hidden'; 
onOff = "off"; 
}  
else
{
cl.style.visibility = 'hidden';  
}
}  
};

//Hides/shows Caps Lock warning when Caps Lock key is pressed once Caps Lock
//state is determined.
function hideMsg(e){
var cl = document.getElementById('cl');    
var KeyID = (window.event) ? event.keyCode : e.keyCode; 

if(KeyID==20 && onOff == "on")
{
cl.style.visibility = 'hidden';
onOff = "off";
}
else if(KeyID==20 && onOff == "off")
{
cl.style.visibility = 'visible';
onOff = "on";
}
}
document.onkeydown=hideMsg

</script>


<body OnLoad="document.form1.tb1.focus();">
<form name="form1">
<input name="tb1" onkeypress="capLock(event)" type="text" onLoad="javascript:this.focus" /><p />
<input name="tb2" onkeypress="capLock(event)" type="password" /><p />
<input id="Reset1" type="reset" value="reset" /><p />
<span id="cl" class="hint" style="visibility:hidden;">Caps Lock is On!
<p>Having Caps Lock on may cause you to enter your password incorrectly.</p>
<p>You should press Caps Lock to turn it off before entering your password.<p/>
</span>
</form>
</body>

【问题讨论】：

小点：((kc == 16) ? true : false) -- 这可以替换为(kc == 16)
感谢您的信息。我已根据您的建议更新了脚本。

标签： javascript dom-events capslock

【解决方案1】：

我会考虑重写...

但首先，如何检测 CapsLock 是否打开？

您可以检查按下的键，如果：

按下的键是大写的，并且没有按下shift，或者
按下的ket是小写的，shift 是按下的

像这样简单的东西会起作用：

(function () {
  var hint = document.getElementById('cl');

  var keypressHandler = function (e) {
    e = e || window.event;
    var keyCode =  e.keyCode || e.which,
    character = String.fromCharCode(keyCode),
    isLetter = /[a-z]/i.test(character), 
    capsLockOn = isLetter && (character === character.toUpperCase() && !e.shiftKey) || 
    // Case 1: capslock on, without shift pressed
                (character === character.toLowerCase() && e.shiftKey);
    // Case 2: capslock on, with shift pressed

    hint.style.display = capsLockOn ? '' : 'none'; // show or hide the 'hint'
  }

  // Bind keypress event to both inputs:
  document.getElementById('tb1').onkeypress = 
  document.getElementById('tb2').onkeypress = keypressHandler;
})();

使用您的标记here检查上述代码的示例。

【讨论】：

Yours 是另一种与我的脚本进行相同检查的方法。检查键码和是否按下了 Shift 键。我的也进行反向检查（大写锁定是否关闭？）它使用此开/关信息在按下大写锁定键时切换警告。您的不包括此功能。这样，在大写锁定键按下后立即显示/隐藏消息。运行我的代码，输入一个字母，然后按大写锁定。该消息将立即弹出或关闭。只有先按大写锁定，然后输入字母后，消息才会出现和消失。未成年我知道，但这就是我所追求的。杰夫