您如何确定大写锁定是否在使用JavaScript?


242

您如何确定大写锁定是否在使用JavaScript?

需要注意的是:我用google搜索了,找到的最佳解决方案是将一个onkeypress事件附加到每个输入,然后每次检查所按字母是否为大写,如果是,则检查是否也按住shift键。如果不是,则必须打开大写锁定。这感觉真的很脏而且只是... 浪费 -当然有比这更好的方法了吗?


198
因为太多用户喜欢这种方式填写他们的表格。
尼克

7
@nicf:如果是这样,为什么不对输入运行一个正则表达式,并要求他们停止大写字母的情况下停止喊叫呢?
某个

155
这样做有更好的理由。如果用户输入密码,则在打开大写锁定时警告他们非常有用。
T Nguyen

23
好像浏览器应该在用户键入input type=password字段时执行“大写锁定已打开”警告(类似于input type=emailchrome中的电子邮件地址验证等)
没必要,2014年

8
很好的问题,但可接受的答案是8岁。更好的响应在这里
Mac

Answers:


95

您可以尝试一下。添加了一个有效的示例。当焦点在输入上时,打开大写锁定会使LED变为红色,否则变为绿色。(尚未在Mac / Linux上进行过测试)

注意:这两个版本都对我有用。感谢您在评论中的建设性投入。

旧版本:https//jsbin.com/mahenes/edit?js,输出

另外,这是修改后的版本(有人可以在Mac上测试并确认)

新版本:https//jsbin.com/xiconuv/edit?js,输出

新版本:

function isCapslock(e){
    const IS_MAC = /Mac/.test(navigator.platform);

    const charCode      = e.charCode;
    const shiftKey      = e.shiftKey;

    if (charCode >= 97 && charCode <= 122){
      capsLock = shiftKey;
    } else if (charCode >= 65 && charCode <= 90 
               && !(shiftKey && IS_MAC)){
      capsLock = !shiftKey;
    }

    return capsLock;
}

旧版:

函数isCapslock(e){

e = (e) ? e : window.event;

var charCode = false;
if (e.which) {
    charCode = e.which;
} else if (e.keyCode) {
    charCode = e.keyCode;
}

var shifton = false;
if (e.shiftKey) {
    shifton = e.shiftKey;
} else if (e.modifiers) {
    shifton = !!(e.modifiers & 4);
}

if (charCode >= 97 && charCode <= 122 && shifton) {
    return true;
}

if (charCode >= 65 && charCode <= 90 && !shifton) {
    return true;
}

return false;

}

对于国际字符,可以根据需要为以下键添加附加检查。您必须获取感兴趣字符的键码范围,可能是通过使用一个键映射数组,该数组将保存您要寻址的所有有效用例键。

大写AZ或'Ä','Ö','Ü',小写aZ或0-9或'ä','ö','ü'

上面的键只是示例表示。


1
这可能不是最好的实现,但是当我编写它时,我试图使其保持简单。我认为,要真正满足不同浏览器的需要,唯一的办法就是做到。

2
我发现将其与keydown(在chrome中)结合使用会导致所有代码都变成大写字母。如果我使用按键,它会起作用。
2014年

2
为所有国际字符找到每种可能的字符组合注定会漏掉某些情况。改用toUpper / Lower case方法检查外壳。
2015年

3
令人惊讶的是,一个完全错误的答案-混淆字符代码和ascii(!!!)-可以得到那么多的赞誉。没有人检查过???
GameAlchemist

1
请注意,根据Mozilla,event。其已从Web标准中删除。
verism

130

在jQuery中

$('#example').keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
        alert('caps is on');
    }
});

避免s.toLowerCase() !== s需要使用Backspace键之类的错误 。


5
实际上... fromCharCode消除了我进行检查的需要。但是应该注意,keydown和keypress给出了不同的字符代码,这是我首先出错的地方。
牛油树

4
-1 bc仅在CAPS开启时未按下Shift的情况下才有效。

1
如果有人想观看带有引导程序的实时示例,那么您可以在此处查看bootply.com/91792
Govinda Rajbhar,2016年

这个答案对我很有用。由于@D_N提到的缺陷,我改进了此答案中的条件,即按shift键时它不起作用。
SebasSBM

105

您可以使用 KeyboardEvent来检测许多按键,包括最新浏览器上的大写锁定。

getModifierState函数将提供以下状态:

  • Alt键
  • AltGraph
  • 大写锁定
  • 控制
  • Fn(Android)
  • 数字键盘(的第一个键
  • 作业系统(Windows和Linux)
  • 滚动锁
  • 转移

该演示可在所有主流浏览器(包括移动设备)上运行。

passwordField.addEventListener( 'keydown', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  console.log( caps ); // true when you press the keyboard CapsLock key
});

6
我在一个重复/类似问题上回答了此问题,并由另一位用户更新了此信息,该用户现在已支持Chrome。我证实了这一点,所以现在所有主流浏览器上运行-而且应该是对这个问题的最佳解决方案
伊恩·克拉克

caniuse.com/#search=getModifierState表示Safari当前不支持该功能(还可以吗?)。因此,在所有主流浏览器上可能还不是这样。
詹斯·库伊

2
Safari现在受支持。
Mottie '17

1
但是,它检测到按下大写锁定,并且当用户输入表格时无法获得一般的大写锁定状态...
SparK

除了将大写锁定键按到关闭位置时,这似乎可行。直到下一次按键时,它才会拾取该输入。这是在适用于OS X的Chrome上进行的。不确定这是否适用于所有浏览器和OS。
Ashraf Slamang

24

您可以使用文档上的按键捕获来使用“是大写字母且不按下Shift键”来检测大写锁定。但是,然后最好确保在事件气泡到达文档上的处理程序之前,没有其他按键处理程序弹出事件气泡。

document.onkeypress = function ( e ) {
  e = e || window.event;
  var s = String.fromCharCode( e.keyCode || e.which );
  if ( (s.toUpperCase() === s) !== e.shiftKey ) {
    // alert('caps is on')
  }
}

您可以在捕获阶段在支持该功能的浏览器中捕获该事件,但这似乎毫无意义,因为它不适用于所有浏览器。

我想不出任何其他方式来实际检测大写锁定状态。无论如何,检查都很简单,如果键入了不可检测的字符,那么...那么检测就没有必要了。

去年有一篇关于24种方式的文章。很好,但是缺乏国际字符支持(用于toUpperCase()解决问题)。


这实际上是我想要的。这适用于拉丁和西里尔字母字符串。谢谢!
Mladen Janjetovic

这很好用,但是像SPACE和数字这样的键会提示警告。知道(类似的简洁/优雅)解决方法吗?

1
同样,您可以注意到不完整是件好事,但仍然不完整。不确定如何使用此方法解决该问题。

11

许多现有答案将在未按下shift键时检查大写锁定,但是如果您按下shift键并获取小写字母,则不会对其进行检查,或者将对此进行检查,但不会同时检查大写锁定是否关闭,或者将对此进行检查,但是会将非字母键视为“关闭”。这是一个经过改编的jQuery解决方案,如果按下带有大写字母的Shift键(无移位或无移位),将显示警告;如果按下不带有大写字母的Alpha键,则将关闭警告,但在关闭时不打开或关闭警告按下数字或其他键。

$("#password").keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
      (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
        $("#CapsWarn").show();
    } else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
      (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
        $("#CapsWarn").hide();
    } //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
  });

11

在JQuery中。这涵盖了Firefox中的事件处理,并将检查意外的大写和小写字符。前提是一个<input id="password" type="password" name="whatever"/>元素和一个ID为' capsLockWarning' 的单独元素具有我们要显示的警告(但以其他方式隐藏)。

$('#password').keypress(function(e) {
    e = e || window.event;

    // An empty field resets the visibility.
    if (this.value === '') {
        $('#capsLockWarning').hide();
        return;
    }

    // We need alphabetic characters to make a match.
    var character = String.fromCharCode(e.keyCode || e.which);
    if (character.toUpperCase() === character.toLowerCase()) {
        return;
    }

    // SHIFT doesn't usually give us a lowercase character. Check for this
    // and for when we get a lowercase character when SHIFT is enabled. 
    if ((e.shiftKey && character.toLowerCase() === character) ||
        (!e.shiftKey && character.toUpperCase() === character)) {
        $('#capsLockWarning').show();
    } else {
        $('#capsLockWarning').hide();
    }
});

我不确定为什么,但是此方法不适用于第一次按键(仅在Chrome上测试)。

可能是空字段隐藏问题?我至少在Chrome中无法正常运行。它会自动在许多其他浏览器中发生(至少在下面的我的版本中),因为退格键会计数并清空mssg。

注意:在这里正确使用时,您需要使用该keypress事件在输入上使用不同的大小写,因为keydownkeyup都将始终返回大写。因此,如果您打算与e.originalEvent.getModifierState('CapsLock')
KyleMit

6

出于以下几个原因,这里的最佳答案对我不起作用(未注释的代码,无效的链接和不完整的解决方案)。所以我花了几个小时尝试所有人的努力,并尽我所能:这是我的,包括jQuery和非jQuery。

jQuery的

请注意,jQuery规范化了事件对象,因此缺少一些检查。我还将其范围缩小到所有密码字段(因为这是需要它的最大原因),并添加了警告消息。已在Chrome,Mozilla,Opera和IE6-8中测试过。稳定,并在按下数字或空格时捕获除capslock状态之外的所有大写锁定状态。

/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {

    var $warn = $(this).next(".capsWarn"); // handle the warning mssg
    var kc = e.which; //get keycode
    var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
    var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
    // event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
    var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed

    // uppercase w/out shift or lowercase with shift == caps lock
    if ( (isUp && !isShift) || (isLow && isShift) ) {
        $warn.show();
    } else {
        $warn.hide();
    }

}).after("<span class='capsWarn error' style='display:none;'>Is your CAPSLOCK on?</span>");

没有jQuery

其他一些无jQuery的解决方案缺少IE后备功能。@Zappa修补了它。

document.onkeypress = function ( e ) {
    e = (e) ? e : window.event;

    var kc = ( e.keyCode ) ? e.keyCode : e.which; // get keycode
    var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
    var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
    var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed -- works for IE8-

    // uppercase w/out shift or lowercase with shift == caps lock
    if ( (isUp && !isShift) || (isLow && isShift) ) {
        alert("CAPSLOCK is on."); // do your thing here
    } else {
        // no CAPSLOCK to speak of
    }

}

注意:请查看@ Borgar,@ Joe Liversedge和@Zappa的解决方案,以及由@Pavel Azanov开发的插件,我没有尝试过,但这是一个好主意。如果有人知道将范围扩大到A-Za-z以外的方法,请进行编辑。另外,此问题的jQuery版本已作为重复项关闭,因此这就是我在此处发布两者的原因。


4
一个好的解决方案应该始终包括支持英文字母AZ以外的字母。任何其他解决方案都是对几乎所有非英语语言的侮辱。
敬畏2014年

6

我们getModifierState用来检查大写锁定,因为它只是鼠标或键盘事件的成员,所以我们不能使用onfocus。密码字段获得焦点的最常见的两种方法是单击或单击选项卡。我们使用onclick检查输入中的鼠标单击,然后使用onkeyup用于检测前一个输入字段中的选项卡。如果密码字段是页面上的唯一字段并且自动聚焦,则在释放第一个键之前不会发生该事件,这可以,但是不理想,您确实希望大写锁定工具提示在获得密码字段后显示集中精力,但在大多数情况下,此解决方案就像一个魅力。

的HTML

<input type="password" id="password" onclick="checkCapsLock(event)" onkeyup="checkCapsLock(event)" />

JS

function checkCapsLock(e) {
  if (e.getModifierState("CapsLock")) {
    console.log("Caps");
  }
}

https://codepen.io/anon/pen/KxJwjq


高超!在我的实现中简单,简洁且完美无缺。
Sirtastic

1
@Ryan:感谢您的贡献!这是一个很好的干净代码示例,尽管我想指出您的答案与 Mottie在2015年的回复,你们俩都在此使用event.getModifierState("CapsLock").
Mac

5

我知道这是一个古老的话题,但我想我会回馈以防它对别人有帮助。这个问题的答案似乎都没有在IE8中起作用。但是,我确实找到了可在IE8中使用的代码。(Havent还测试了低于IE8的任何内容)。如果需要,可以为jQuery轻松修改。

function capsCheck(e,obj){ 
    kc = e.keyCode?e.keyCode:e.which;  
    sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);  
    if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk)){
        document.getElementById('#'+obj.id).style.visibility = 'visible';
    } 
    else document.getElementById('#'+obj.id).style.visibility = 'hidden';
}

然后通过onkeypress事件调用该函数,如下所示:

<input type="password" name="txtPassword" onkeypress="capsCheck(event,this);" />
<div id="capsWarningDiv" style="visibility:hidden">Caps Lock is on.</div> 

感谢IE8修复。将其合并到我重新设计的答案中(如下)。不过,这很可靠。

5

该解决方案除了在写入时检查状态外,还可以在每次 Caps Lock键(在某些限制条件下)。

它还支持在AZ范围之外的非英语字母,因为它对照toUpperCase()toLowerCase()不是对照字符范围来检查字符串字符。

$(function(){
  //Initialize to hide caps-lock-warning
  $('.caps-lock-warning').hide();

  //Sniff for Caps-Lock state
  $("#password").keypress(function(e) {
    var s = String.fromCharCode( e.which );
    if((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)||
       (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
      this.caps = true; // Enables to do something on Caps-Lock keypress
      $(this).next('.caps-lock-warning').show();
    } else if((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
              (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) {
      this.caps = false; // Enables to do something on Caps-Lock keypress
      $(this).next('.caps-lock-warning').hide();
    }//else else do nothing if not a letter we can use to differentiate
  });

  //Toggle warning message on Caps-Lock toggle (with some limitation)
  $(document).keydown(function(e){
    if(e.which==20){ // Caps-Lock keypress
      var pass = document.getElementById("password");
      if(typeof(pass.caps) === 'boolean'){
        //State has been set to a known value by keypress
        pass.caps = !pass.caps;
        $(pass).next('.caps-lock-warning').toggle(pass.caps);
      }
    }
  });

  //Disable on window lost focus (because we loose track of state)
  $(window).blur(function(e){
    // If window is inactive, we have no control on the caps lock toggling
    // so better to re-set state
    var pass = document.getElementById("password");
    if(typeof(pass.caps) === 'boolean'){
      pass.caps = null;
      $(pass).next('.caps-lock-warning').hide();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="password" id="password" />
<span class="caps-lock-warning" title="Caps lock is on!">CAPS</span>

请注意,只有在我们知道Caps Lock按键之前按下大写锁定的状态时,观察大写锁定的切换才有用。当前的大写锁定状态caps通过password元素上的JavaScript属性保持。这是在用户第一次按下大写或小写字母时,我们第一次验证大写锁定状态时设置的设置。如果窗口失去焦点,我们将无法再观察大写锁定切换,因此我们需要重置为未知状态。


2
好主意。如果要向用户显示大写锁定处于打开状态的警告,则最好在禁用大写锁定时立即关闭该警告,否则可能会使用户感到困惑。
Ajedi32


3

对于具有Twitter引导程序的jQuery

检查锁定的大写字母是否包含以下字符:

大写AZ或'Ä','Ö','Ü','!',''','§','$','%','&','/','(',')' ,'=',':',';','*','''

小写aZ或0-9或'ä','ö','ü','。',',','+','#'

/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {
    var kc = e.which; // get keycode

    var isUpperCase = ((kc >= 65 && kc <= 90) || (kc >= 33 && kc <= 34) || (kc >= 36 && kc <= 39) || (kc >= 40 && kc <= 42) || kc == 47 || (kc >= 58 && kc <= 59) || kc == 61 || kc == 63 || kc == 167 || kc == 196 || kc == 214 || kc == 220) ? true : false; // uppercase A-Z or 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')', '=', ':', ';'
    var isLowerCase = ((kc >= 97 && kc <= 122) || (kc >= 48 && kc <= 57) || kc == 35 || (kc >= 43 && kc <= 44) || kc == 46 || kc == 228 || kc == 223 || kc == 246 || kc == 252) ? true : false; // lowercase a-Z or 0-9 or 'ä', 'ö', 'ü', '.', ','

    // event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
    var isShift = (e.shiftKey) ? e.shiftKey : ((kc == 16) ? true : false); // shift is pressed

    // uppercase w/out shift or lowercase with shift == caps lock
    if ((isUpperCase && !isShift) || (isLowerCase && isShift)) {
        $(this).next('.form-control-feedback').show().parent().addClass('has-warning has-feedback').next(".capsWarn").show();
    } else {
        $(this).next('.form-control-feedback').hide().parent().removeClass('has-warning has-feedback').next(".capsWarn").hide();
    }
}).after('<span class="glyphicon glyphicon-warning-sign form-control-feedback" style="display:none;"></span>').parent().after("<span class='capsWarn text-danger' style='display:none;'>Is your CAPSLOCK on?</span>");

jsfiddle上的实时演示


3

显示大写锁定状态的变量:

let isCapsLockOn = false;

document.addEventListener( 'keydown', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  if(isCapsLockOn !== caps) isCapsLockOn = caps;
});

document.addEventListener( 'keyup', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  if(isCapsLockOn !== caps) isCapsLockOn = caps;
});

适用于所有浏览器=> canIUse


1
因对一个旧问题提供最新答案而被赞誉。您可能需要添加标题,例如“对于现代浏览器(2017->)尝试此操作”或“ 2017年更新”之类的内容
eon

3

@ user110902发布的基于jQuery的答案对我很有用。但是,我对它进行了一些改进以防止@B_N的注释中提到的缺陷:在按Shift时,它无法检测到CapsLock:

$('#example').keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if (( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey )
    ||  ( s.toLowerCase() === s && s.toUpperCase() !== s && e.shiftKey )) {
        alert('caps is on');
    }
});

这样,即使按Shift键也可以使用。


2

此代码无论大小写或按下Shift键,都可以检测到大写锁定:

$('#password').keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if ( (s.toUpperCase() === s && !e.shiftKey) || 
             (s.toLowerCase() === s && e.shiftKey) ) {
        alert('caps is on');
    }
});

这导致空间和退格键在Firefox上被检测为大写。
阿德里安·罗斯卡

2

我编写了一个名为capsLock的库,它确实可以实现您想要的功能。

只需将其包含在您的网页中即可:

<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>

然后按如下方式使用它:

alert(capsLock.status);

capsLock.observe(function (status) {
    alert(status);
});

观看演示:http : //jsfiddle.net/3EXMd/

当您按下Caps Lock键时,状态会更新。它仅使用Shift键锁定来确定Caps Lock键的正确状态。最初的状态为false。所以要当心。


这是一个非常巧妙的解决方案。但是它有一个错误,即如果页面获得焦点时打开了Caps Lock,则“ capslock”对象会以不正确的状态(关闭)开始。
Ric

实际上,它始于错误的状态。但是,当您按任意键时,它会自动更正其状态。如果您能找到一种方法来在页面获得焦点时将其设置为正确的状态,那么我很乐意合并您的代码。
Aadit M Shah 2014年

2

还有另一个版本,清晰明了,可以处理移位的capsLock,但我认为不限于ascii:

document.onkeypress = function (e)
{
    e = e || window.event;
    if (e.charCode === 0 || e.ctrlKey || document.onkeypress.punctuation.indexOf(e.charCode) >= 0)
        return;
    var s = String.fromCharCode(e.charCode); // or e.keyCode for compatibility, but then have to handle MORE non-character keys
    var s2 = e.shiftKey ? s.toUpperCase() : s.toLowerCase();
    var capsLockOn = (s2 !== s);
    document.getElementById('capslockWarning').style.display = capsLockOn ? '' : 'none';
}
document.onkeypress.punctuation = [33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,91,92,93,94,95,96,123,124,125,126];

编辑: capsLockOn的意义被颠倒了,doh,已修复。

编辑#2:在检查了更多内容之后,我做了一些更改,不幸的是,代码更加详细,但是它可以适当地处理更多操作。

  • 使用e.charCode而不是e.keyCode并检查0值会跳过许多非字符按键,而无需编码特定于给定语言或字符集的任何内容。根据我的理解,它的兼容性稍差一些,因此较旧的,非主流的或移动浏览器可能无法按此代码的预期运行,但对于我的情况还是值得的。

  • 检查已知的标点符号列表可防止将它们视为假阴性,因为它们不受大写锁定的影响。否则,当您键入任何标点符号时,大写锁定指示器将被隐藏。通过指定排除集而不是包含集,它应该与扩展字符更加兼容。这是最丑陋,最特殊的情况,非西方语言有可能存在足够不同的标点符号和/或标点符号,这是一个问题,但同样值得IMO,至少就我的情况而言。


2

反应

onKeyPress(event) { 
        let self = this;
        self.setState({
            capsLock: isCapsLockOn(self, event)
        });
    }

    onKeyUp(event) { 
        let self = this;
        let key = event.key;
        if( key === 'Shift') {
            self.shift = false;
        }
    }

    <div>
     <input name={this.props.name} onKeyDown={(e)=>this.onKeyPress(e)} onKeyUp={(e)=>this.onKeyUp(e)} onChange={this.props.onChange}/>
                {this.capsLockAlert()}
</div>

function isCapsLockOn(component, event) {
        let key = event.key;
        let keyCode = event.keyCode;

        component.lastKeyPressed = key;

        if( key === 'Shift') {
            component.shift = true;
        } 

        if (key === 'CapsLock') {
            let newCapsLockState = !component.state.capsLock;
            component.caps = newCapsLockState;
            return newCapsLockState;
        } else {
            if ((component.lastKeyPressed !== 'Shift' && (key === key.toUpperCase() && (keyCode >= 65 && keyCode <= 90)) && !component.shift) || component.caps ) {
                component.caps = true;
                return true;
            } else {
                component.caps = false;
                return false;
            }
        }
    }

1

基于@joshuahedlund的答案,因为它对我来说很好。

我将代码设为函数,以便可以重用,并根据情况将其链接到主体。仅在您愿意时,它才能链接到密码字段。

<html>
<head>
<script language="javascript" type="text/javascript" >
function checkCapsLock(e, divId) { 
    if(e){
        e = e;
    } else {
        e = window.event;
    }
    var s = String.fromCharCode( e.which );
    if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
      (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
        $(divId).style.display='block';
    } else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
      (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
        $(divId).style.display='none';
   } //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
 }
</script>
<style>    
.errorDiv {
    display: none;
    font-size: 12px;
    color: red;
    word-wrap: break-word;
    text-overflow: clip;
    max-width: 200px;
    font-weight: normal;
}
</style>
</head>
<body  onkeypress="checkCapsLock(event, 'CapsWarn');" >
...
<input name="password" id="password" type="password" autocomplete="off">
<div id="CapsWarn" class="errorDiv">Capslock is ON !</div>
...
</body>
</html>

1

上面MottieDiego Vieira的 回答是我们最终使用的,现在应该是公认的答案。但是,在我注意到之前,我写了这个不依赖字符代码的小javascript函数...

var capsLockIsOnKeyDown = {shiftWasDownDuringLastChar: false,
  capsLockIsOnKeyDown: function(event) {
    var eventWasShiftKeyDown = event.which === 16;
    var capsLockIsOn = false;
    var shifton = false;
    if (event.shiftKey) {
        shifton = event.shiftKey;
    } else if (event.modifiers) {
        shifton = !!(event.modifiers & 4);
    }

    if (event.target.value.length > 0 && !eventWasShiftKeyDown) {
      var lastChar = event.target.value[event.target.value.length-1];
      var isAlpha = /^[a-zA-Z]/.test(lastChar);

      if (isAlpha) {
        if (lastChar.toUpperCase() === lastChar && lastChar.toLowerCase() !== lastChar
          && !event.shiftKey && !capsLockIsOnKeyDown.shiftWasDownDuringLastChar) {
          capsLockIsOn =  true;
        }
      }
    }
    capsLockIsOnKeyDown.shiftWasDownDuringLastChar = shifton;
    return capsLockIsOn;
  }
}

然后像这样在事件处理程序中调用它 capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)

但是同样,我们最终仅使用@Mottie和@Diego Vieira的响应


0

在下面的这段代码中,当Caps锁定并且按下shift键时,它将显示警报。

如果返回false;那么当前字符将不会追加到文本页面。

$('#password').keypress(function(e) { 
    // e.keyCode is not work in FF, SO, it will
    // automatically get the value of e.which.  
    var s = String.fromCharCode( e.keyCode || e.which );
    if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
            alert('caps is on');
            return false;
    }
else  if ( s.toUpperCase() !== s) {
            alert('caps is on and Shiftkey pressed');
            return false;
    }
});

仅在大写锁定打开时有效。如果大写锁定处于关闭状态,则它仍然报告大写锁定处于打开状态,但是按下了Shift键(无论是否实际按下了Shift键)。
2014年

Ok对不起@awe
Naga Harish M

0

试试这个简单的代码,易于理解

这是剧本

 <script language="Javascript">
function capLock(e){
 kc = e.keyCode?e.keyCode:e.which;
 sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
 if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
  document.getElementById('divMayus').style.visibility = 'visible';
 else
   document.getElementById('divMayus').style.visibility = 'hidden';
}
</script>

和HTML

<input type="password" name="txtPassword" onkeypress="capLock(event)" />
 <div id="divMayus" style="visibility:hidden">Caps Lock is on.</div> 

0

尝试使用此代码。

$('selectorOnTheInputTextBox').keypress(function (e) {
        var charCode = e.target.value.charCodeAt(e.target.value.length - 1)
        var capsOn = 
            e.keyCode && 
            !e.shiftKey &&
            !e.ctrlKey &&
            charCode >= 65 && 
            charCode <= 90;

            if (capsOn) 
               //action if true
            else
               //action if false
});

祝好运 :)



0

这是一个使用jui ui的自定义jquery插件,由此页面上的所有好主意组成,并利用了工具提示小部件。大写锁定消息将自动应用到所有密码框,并且不需要更改您当前的html。

自定义插件代码...

(function ($) {
    $.fn.capsLockAlert = function () {
        return this.each(function () {
            var capsLockOn = false;
            var t = $(this);
            var updateStatus = function () {
                if (capsLockOn) {
                    t.tooltip('open');
                } else {
                    t.tooltip('close');
                }
            }
            t.tooltip({
                items: "input",
                position: { my: "left top", at: "left bottom+10" },
                open: function (event, ui) {
                    ui.tooltip.css({ "min-width": "100px", "white-space": "nowrap" }).addClass('ui-state-error');
                    if (!capsLockOn) t.tooltip('close');
                },
                content: function () {
                    return $('<p style="white-space: nowrap;"/>')
                        .append($('<span class="ui-icon ui-icon-alert" style="display: inline-block; margin-right: 5px; vertical-align: text-top;" />'))
                        .append('Caps Lock On');
                }
            })
            .off("mouseover mouseout")
            .keydown(function (e) {
                if (e.keyCode !== 20) return;
                capsLockOn = !capsLockOn;
                updateStatus();
            })
            .keypress(function (e) {
                var kc = e.which; //get keycode

                var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
                var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
                if (!isUp && !isLow) return; //This isn't a character effected by caps lock

                // event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
                var isShift = (e.shiftKey) ? e.shiftKey : ((kc === 16) ? true : false); // shift is pressed

                // uppercase w/out shift or lowercase with shift == caps lock
                if ((isUp && !isShift) || (isLow && isShift)) {
                    capsLockOn = true;
                } else {
                    capsLockOn = false;
                }
                updateStatus();
            });
        });
    };
})(jQuery);

应用于所有密码元素...

$(function () {
    $(":password").capsLockAlert();
});

0

JavaScript代码

<script type="text/javascript">
   function isCapLockOn(e){
   kc = e.keyCode?e.keyCode:e.which;
   sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
   if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
       document.getElementById('alert').style.visibility = 'visible';
   else
       document.getElementById('alert').style.visibility = 'hidden';
   }
</script>

现在,我们需要使用HTML关联此脚本

<input type="password" name="txtPassword" onkeypress="isCapLockOn(event)" />
<div id="alert" style="visibility:hidden">Caps Lock is on.</div> 

0

我知道已经晚了,但是,这对其他人可能会有帮助。

所以这是我最简单的解决方案(使用土耳其字符);

function (s,e)
{
    var key = e.htmlEvent.key;

    var upperCases = 'ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZXWQ';
    var lowerCases = 'abcçdefgğhıijklmnoöprsştuüvyzxwq';
    var digits = '0123456789';

    if (upperCases.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[A]';
    }

    else if (lowerCases.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[a]';
    }

    else if (digits.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[1]';
    }

    else
    {
        document.getElementById('spanLetterCase').innerText = '';
    }
}

0

因此,我找到了此页面,但并不真正喜欢我找到的解决方案,因此我找出了解决方案,并将其提供给所有人。对我来说,只有在我输入字母时大写锁定处于打开状态才很重要。这段代码为我解决了这个问题。它快速简便,并为您提供capsIsOn变量以供您在需要时引用。

let capsIsOn=false;
let capsChecked=false;

let capsCheck=(e)=>{
    let letter=e.key;
    if(letter.length===1 && letter.match(/[A-Za-z]/)){
        if(letter!==letter.toLowerCase()){
          capsIsOn=true;
          console.log('caps is on');
        }else{
          console.log('caps is off');
        }
        capsChecked=true;
        window.removeEventListener("keyup",capsCheck);
    }else{
      console.log("not a letter, not capsCheck was performed");
    }

}

window.addEventListener("keyup",capsCheck);

window.addEventListener("keyup",(e)=>{
  if(capsChecked && e.keyCode===20){
    capsIsOn=!capsIsOn;
  }
});


-1

键入时,如果启用了caplock,它将自动将当前char转换为小写。这样,即使打开了caplocks,它的行为也不会像当前页面上那样。为了通知您的用户,您可以显示一个文本,说明已启用大写锁定,但转换了表单项。


是的,但是您仍然需要检测大写锁定。另外,这意味着您不允许使用大写的密码,这是次优的。
戴夫·利普曼2012年

要检测是否启用了大写锁定,您必须检查发送的字符的小写版本是否与之不同,如果是->大写锁定,则«警告:您正在使用大写锁定,但我们的系统正在转换小写»,我想javascript并不是要检测大写锁定(检查大写锁定需要系统访问),您必须找到最适合您需要的方法
Frederik.L 2012年

-1

有一种检测大写锁定的简单得多的解决方案:

function isCapsLockOn(event) {
    var s = String.fromCharCode(event.which);
    if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
        return true;
    }
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.