你如何判断大写locking是否使用JavaScript?

你如何判断大写locking是否使用JavaScript?

一个警告,但我做了谷歌它,我可以find最好的解决scheme是附加一个onkeypress事件到每个input,然后检查每次如果按字母大写,如果是的话,然后检查是否也按住了转移。 如果不是,那么大写locking必须打开。 这感觉真的很肮脏,只是… 浪费 – 肯定有比这更好的方式?

发现这个有趣的….你可以试试看..

 function 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; } 

对于国际字符,可以根据需要为以下键添加额外的检查。 你必须得到你感兴趣的字符的键码范围,可能是通过使用一个keymapping数组,它将容纳你正在处理的所有有效的用例键…

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

以上键只是样品表示。

在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

您可以使用KeyboardEvent检测多个键,包括最近浏览器上的大写locking。

getModifierState函数将提供以下状态:

  • Alt键
  • 同时按下AltGraph
  • 大写locking
  • 控制
  • Fn(Android)
  • 数字键盘(的第一个键
  • 操作系统(Windows和Linux)
  • ScrollLock键
  • 转移

此演示适用于所有主stream浏览器,包括手机( caniuse )。

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

您可以使用文档上的按键捕获function,使用“字母大写和无移位按键”来检测大写字母locking。 但是最好确保没有其他按键处理程序在到达文档处理程序之前popup事件泡泡。

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

你可以在支持这个浏览器的捕捉阶段抓住事件,但似乎有点没有意义,因为它不能在所有浏览器上工作。

我想不出任何其他的方式来实际检测大写locking状态。 无论如何,检查是简单的,如果input不可检测的字符,那么…检测是没有必要的。

去年有24篇文章 。 很好,但缺乏国际性的支持(使用toUpperCase()来解决这个问题)。

许多现有的答案将检查大写locking,而不是按下shift键,但不会检查它,如果你按shift和小写,或将检查,但不会检查大写字母锁是否closures,或将检查,但将将把非alpha键视为“off”。 这里是一个改编的jQuery解决scheme,如果按下alpha键(shift或no shift)将会显示一个警告,如果在没有大写字母的情况下按下alpha键,将会closures警告,但是不会打开或closures警告数字或其他键被按下。

 $("#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 (ie not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet) }); 

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

我知道这是一个古老的话题,但我认为我会反馈,以帮助别人。 这个问题的答案似乎没有在IE8中工作。 但是,我发现这个代码在IE8中工作。 (尚未testing任何东西低于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> 

这里的最佳答案对我来说不起作用,有几个原因(未注释的代码与死链接和不完整的解决scheme)。 所以我花了几个小时尝试每一个人,并尽我所能:这是我的,包括jQuery和非jQuery。

jQuery的

请注意,jQuery规范化事件对象,所以一些检查丢失。 我也缩小到所有的密码字段(因为这是需要它的最大原因),并添加了一条警告消息。 这已经在Chrome,Mozilla,Opera和IE6-8中testing过。 稳定并捕获所有大写locking状态,除非按下数字或空格。

 /* 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解决scheme缺乏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的解决scheme,以及由@Pavel Azanov开发的插件,我还没有尝试这个插件,但这是个好主意。 如果有人知道如何将范围扩大到A-ZA-Z之外,请将其编辑。 此外,这个问题的jQuery版本被closures作为重复,所以这就是为什么我在这里发布。

这是一种解决scheme,除了在写入时检查状态之外,每次按下Caps Lock键时也会切换警告消息(有一些限制)。

它还支持AZ范围外的非英文字母,因为它检查stringtoUpperCase()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> 

最近在hashcode.com上有类似的问题 ,我创build了一个jQuery插件来处理它。 它还支持对数字大写locking的识别。 (在标准的德语键盘布局大写locking对数字有影响)。

你可以在这里查看最新版本: jquery.capsChecker

对于jQuery与twitter引导

检查上限locking的字符:

大写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 AZ 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 aZ 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上进行现场演示

此代码检测大写locking无论大小写还是按下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'); } }); 

我写了一个名为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 。 所以要小心。

还有另一个版本,明确而简单,处理转移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值会跳过很多非字符按键,而不需要编写特定于给定语言或字符集的任何东西。 根据我的理解,它的兼容性稍差,所以老的,非主stream的或移动的浏览器可能不像这个代码所期望的那样行事,但是对我而言,这是值得的。

  • 检查已知的标点符号列表可以防止它们被视为错误的否定,因为它们不受大写locking的影响。 如果没有这个,当你键入任何标点字符时,大写字母locking指示器将被隐藏。 通过指定一个排除的集合,而不是一个包含的集合,它应该与扩展字符更兼容。 这是最丑陋,最特别的一点,有些非西方语言有足够的标点符号和/或标点符号成为一个问题,但是至less在我的情况下,它是值得的。

基于@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 (ie 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> 

在下面的代码中,Capslocking时会显示警报,并使用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; } }); 

试一下简单的代码就容易理解了

这是脚本

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

尝试使用这个代码。

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

祝你好运 :)

你可以使用这个脚本 。 即使按下了Shift键,它也能在Windows上正常工作,但如果是这样的话,它将无法在Mac OS上正常工作。

这里是一个自定义jQuery插件,使用jQuery UI,由本页面上的所有好点子组成,并利用工具提示小部件。 大写locking消息是自动应用所有密码框,不需要更改您的当前的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(); }); 

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> 

显示大写locking状态的variables:

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

适用于所有浏览器=> 可以使用

应对

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

当你键入的时候,如果有了caplock,它可以自动将当前字符转换为小写字母。 这样,即使封锁,它不会像当前页面上的行为。 要通知您的用户,您可以显示一个文字,说明封锁处于打开状态,但表单条目已转换。

检测大写locking有一个更简单的解决scheme:

 function isCapsLockOn(event) { var s = String.fromCharCode(event.which); if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) { return true; } } 

在jQuery中 :

 $('some_element').keypress(function(e){ if(e.keyCode == 20){ //caps lock was pressed } }); 

这个jQuery插件 ( 代码 )实现了与Rajesh的回答相同的想法,更简洁一点。