你如何判断大写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的回答相同的想法，更简洁一点。
