Caps Lock脚本清理

Question

I was wondering if someone could help me clean up this code if possible; 我想知道是否有人可以帮助我清理这段代码； including merging the two functions into one. 包括将两个功能合并为一个。 I'm new to javascript so I could really use some help. 我是javascript新手，所以我真的可以使用一些帮助。

I was able to get this script working quite well, I just want to know if it can be refined and/or if there are any problems with it that I overlooked. 我能够使此脚本运行良好，我只想知道它是否可以改进和/或是否存在我忽略的问题。

The script first determines whether caps lock is on or off based on keypresses. 该脚本首先根据按键来确定大写锁定是打开还是关闭。 Once caps lock state is determined, pressing the caps lock key simply toggles the caps lock warning message on or off. 确定大写锁定状态后，按大写锁定键只需打开或关闭大写锁定警告消息即可。

Thanks, 谢谢，

Jeff 杰夫

<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>

Answer 1

I would think in a re-write... 我会认为是重写...

But first, how do you detect if CapsLock is on? 但是首先，如何检测CapsLock是否打开？

You can inspect the pressed keys, and it will be on if: 您可以检查按下的键，如果出现以下情况，它将处于打开状态：

The pressed key is uppercase, and shift is not pressed, or 所按下的键为大写，而不按下shift，或者
The pressed ket is lowercase, and shift is pressed 按下的KET是小写的，并且被压移

Something simple like this would work: 像这样简单的事情会起作用：

(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;
})();

Check an example of the above code with your markup here . 在此处使用标记检查上述代码的示例。

Caps Lock脚本清理

问题描述

1 个解决方案

解决方案1
1 2009-12-29 04:23:09

Caps Lock脚本清理

问题描述

1 个解决方案

解决方案1 1 2009-12-29 04:23:09

解决方案1
1 2009-12-29 04:23:09