nic*_*ckf 234 javascript keyboard capslock
你怎么知道使用JavaScript是否打开大写锁定？
但有一点需要注意:我确实谷歌了,我能找到的最佳解决方案是将onkeypress事件附加到每个输入,然后每次检查按下的字母是否为大写,如果是,则检查是否也按下了移位.如果不是,那么必须打开大写锁定.这感觉很脏,只是...... 浪费 - 肯定有比这更好的方法吗？
小智 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.
Mot*_*tie 101
您可以使用a KeyboardEvent来检测大量密钥,包括最近浏览器上的大写锁定.
该getModifierState函数将提供以下状态:
passwordField.addEventListener( 'keydown', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
console.log( caps ); // true when you press the keyboard CapsLock key
});
raj*_*lai 92
发现这个有趣......你可以尝试一下..
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;
}
对于国际字符,可以根据需要为以下键添加附加检查.您必须获取您感兴趣的字符的键码范围,可以使用键盘映射数组,该数组将包含您要处理的所有有效用例键...
大写AZ或'Ä','Ö','Ü',小写字母aZ或0-9或'ä','ö','ü'
以上键只是示例表示.
Bor*_*gar 24
您可以使用文档上的按键捕获使用"is letter uppercase and no shift pressed"来检测大写锁定.但是,最好确保没有其他按键处理程序在它到达文档处理程序之前弹出事件泡泡.
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()解决这个问题).
Joe*_*dge 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();
}
});
jos*_*und 11
许多现有的答案将在未按下班次时检查大写锁定,但是如果您按下shift并获得小写,则不会检查大写,或者将检查该大小但是也不会检查大写锁定是否关闭,或者将检查将非alpha键视为"关闭".这是一个改进的jQuery解决方案,如果按下带有大写字母的阿尔法键(移位或无移位)将显示警告,如果没有大写字母按下阿尔法键,将关闭警告,但是当关闭或打开时不会关闭警告按下数字或其他键.
$("#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)
});
小智 6
这里的最佳答案对我来说不起作用有几个原因(未注释的代码带有死链接和不完整的解决方案).所以我花了几个小时尝试每个人,并尽我所能:这是我的,包括jQuery和非jQuery.
请注意,jQuery规范化事件对象,因此缺少某些检查.我还将它缩小到所有密码字段(因为这是需要它的最大原因)并添加了警告消息.这已经在Chrome,Mozilla,Opera和IE6-8中进行了测试.稳定并捕获所有大写锁定状态除非按下数字或空格.
/* 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解决方案缺少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版本作为重复关闭,所以这就是我在这里发布的原因.
我知道这是一个古老的话题,但我想我会反馈以防万一.这个问题的答案似乎都不适用于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>
这是一种解决方案,除了在写入时检查状态外,还在每次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密码元素上的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");
}
}
https://codepen.io/anon/pen/KxJwjq