如何使用 JavaScript 判断大写锁定是否已打开?
-
20-08-2019 - |
题
如何使用 JavaScript 判断大写锁定是否已打开?
但有一点需要注意:我用谷歌搜索了一下,我能找到的最好的解决方案是附加一个 onkeypress
事件到每个输入,然后每次检查按下的字母是否为大写,如果是,则检查是否也按住了shift。如果不是,则必须打开大写锁定。这感觉真的很肮脏而且只是...... 浪费的 - 当然还有比这更好的方法吗?
解决方案
找到这个有趣.... 你可以试试看..
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;
}
有关国际字符,附加检查可以对于以下项根据需要加入。你必须让你有兴趣的字符键码的范围,可以是通过使用一个键盘映射阵列,将保存您正在处理的有效使用情况钥匙...
大写字母A-Z或 'A', '0', 'U', 小写字母a-Z或0-9或 'A', 'O', 'U'
上面的键只是示例的表示。
其他提示
在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
来检测的众多钥匙包括caps lock在最近的浏览器。
的 getModifierState
功能 将提供国家用于:
- Alt
- AltGraph
- 大写锁定
- 控制
- Fn(安卓)
- 元
- 锁定
- OS(Windows和Linux)
- ScrollLock
- 移位
passwordField.addEventListener( 'keydown', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
console.log( caps ); // true when you press the keyboard CapsLock key
});
可以检测盖使用锁定“是字母的大写和没有移位按下”使用文档上的按键捕获。但是,那么你最好确保没有其他的按键处理程序弹出事件泡它会在文档上的处理程序之前。
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()
要解决这个问题)。
许多现有的答案,将检查大写锁定时,不按换挡,但不会检查它,如果你按shift并获得小写,或将检查这一点,但不会同时检查大写锁定键被关闭,或将检查对于但会考虑非字母键为“关闭”。下面是一个适于jQuery的解决方案,如果一个alpha键被按下与帽(移位或不移位),将显示一个警告,将关闭的警告,如果一个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)
});
在JQuery的。这包括事件在Firefox处理,并将检查这两个意想不到的大写和小写字符。这预示一个<input id="password" type="password" name="whatever"/>
element和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();
}
});
在顶部的答案在这里并没有为我工作的一对夫妇的原因(取消注释代码有死链接和一个不完整的解决方案)。所以,我花了几个小时,试图每个人的去,让尽我所能。这里是我的,包括jQuery和非jQuery的
的jQuery
请注意jQuery的归一化的事件对象,以便一些检查丢失。我还就缩小到了所有口令字段(因为这是需要它的最大原因),并增加了一个警告消息。这已经在浏览器,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利弗西奇和@Zappa和插件通过@Pavel Azanov,我还没有试过,但是是一个好主意,开发的解决方案。如果有人知道的方式来扩大超出-ZA-Z的范围,请编辑了。此外,这个问题的jQuery的版本被封闭,重复的,所以这就是为什么我张贴都在这里。
我知道这是一个老话题,但想到我会反馈的情况下,它可以帮助别人。该问题的答案似乎都不在IE8工作。然而,我却发现这个代码在IE8的作品。 (还没有测试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>
这是一个解决方案是,除了写入时检查状态,也每次切换警告消息的大写锁定键被按压(有一些限制)。
它也支持A-Z范围之外的非英文字母,因为它会针对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 Lock键骨节病>键被按下前锁定。当前盖锁定状态被保持与所述密码元件上的caps
JavaScript属性。这是设置在第一时间,我们有当用户按下一个字母,可以是大写或小写的帽的确认锁定状态。如果窗口失去焦点时,我们不再观察大写锁定切换,因此我们需要重置为未知状态。
我们使用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");
}
}
最近有一个 类似的问题 在 hashcode.com 上,我创建了一个 jQuery 插件来处理它。它还支持数字大写锁定的识别。(在标准德语键盘布局上,大写锁定对数字有影响)。
您可以在这里查看最新版本: jquery.capsChecker
:用于jQuery的与Twitter自举强>
检查锁定以下字符上限:
大写AZ或 'A', '0', 'U', '!',“ '', '§', '$', '%', '&', '/', '(', ')', '=', ':', ';', '*', '''
小写字母a-Z或0-9或 'A', '0', 'U', ' '',', '+', '#'
/* 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>");
这示出了帽锁定状态的变量:
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
此代码检测大写锁定不管的情况下,或者如果换档键被按下:
$('#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键破解,以确定上限的正确状态Lock键。最初状态false
。所以要小心。
然而另一个版本,明确和简单,处理移大写锁定,以及不受约束的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得到扭转,卫生司,固定的。
编辑#2: 在检查这种出一些更重要的是,我做了一些变化,一点的更详细的代码不幸的是,但是它处理更多的行动。
使用电子.charCode而不是电子.钥匙密码和检查0值跳过很多非按键角色,没有编码的任何特定语言或charset。从我的理解是,这是略少兼容的,所以老年、非主流或移动浏览器也可以不表现得以这种代码的期望,但它是值得的,对于我的情况。
检查列表已知的标点符号代码,可以防止它们被看作假阴性的,因为他们没有受到影响的帽子锁。如果不能做到这一点,caps lock指标被隐藏在你任何类型的标点符号。通过指定一个排除设定的,而不是一个包括一,它应当更加兼容扩展的字符。这是丑陋的、特别casiest位,并有一些机会,非西语言具有不同的足够的标点符号和/或标点符号代码是一个问题,但是再一次这是值得国际海事组织,至少对我的情况。
<强>阵营强>
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;
}
}
}
这基于jQuery的答案的张贴@ user110902对我来说非常有用。不过,我改进了一点,以防止@B_N的评论中提及了一个缺陷:它没有检测CapsLock键的同时按下Shift键:
$('#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键。
我提出的代码的功能,因此它可以被重用,在我的情况下,它连接到所述主体。它可以连接到只有你喜欢的密码字段。
<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>
莫蒂的 和 迭戈·维埃拉的 回复 上面是我们最终使用的,现在应该是公认的答案。然而,在我注意到之前,我编写了这个不依赖于字符代码的 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 的回复
在此下面的代码将是显示警报时大写锁定和它们按键使用移。
如果我们返回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,由本网页上的所有好的想法,并利用工具提示部件。本大写锁定消息是汽车应用的所有密码箱,无需更改当前的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>
这是晚,我知道,但是,这可能是有帮助别人。
所以这里是我的simpliest溶液(土耳其字符);
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 = '';
}
}
于是,我找到了这个网页,并没有真的喜欢,我发现这样的解决方案,我想出一个出来,我提供它给大家。对我来说,如果大写锁定,如果我打字信件只在乎。此代码解决了这个问题对我来说。它的快速和容易,给你一个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;
}
});
当你键入,如果caplock是,它可以自动转换当前字符为小写。这样,即使挂锁是,它不会表现得像是在当前页上。通知用户,你可以显示一个文本说,挂锁打开,但表单条目进行转换。
有用于检测大写锁定一个更简单的解决方案:
function isCapsLockOn(event) {
var s = String.fromCharCode(event.which);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
return true;
}
}