你如何告诉如果大写锁定使用JavaScript?
但有一个警告:我做了谷歌,我能找到的最好的解决方案是附加一个onkeypress事件到每个输入,然后检查每次按下的字母是否大写,如果是,然后检查shift是否也按下。如果不是,那么caps lock必须是打开的。这感觉真的很脏,而且…浪费——肯定有比这更好的办法吗?
你如何告诉如果大写锁定使用JavaScript?
但有一个警告:我做了谷歌,我能找到的最好的解决方案是附加一个onkeypress事件到每个输入,然后检查每次按下的字母是否大写,如果是,然后检查shift是否也按下。如果不是,那么caps lock必须是打开的。这感觉真的很脏,而且…浪费——肯定有比这更好的办法吗?
当前回答
所以我找到了这个页面,并不是很喜欢我找到的解决方案,所以我想出了一个,并把它提供给你们所有人。对我来说,只有当我输入字母时,大写锁才重要。这段代码为我解决了问题。它快速和简单,给你一个辣椒变量引用,只要你需要它。
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; } });
其他回答
在下面的代码,它将显示警报时,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;
}
});
上面莫蒂和迭戈·维埃拉的回答是我们最终使用的,现在应该是公认的答案。然而,在我注意到它之前,我写了这个不依赖字符代码的小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(事件)
但最后我们还是用了@ motie和@Diego Vieira的回应
显示大写锁定状态的变量:
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
在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。
在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();
}
});