你如何告诉如果大写锁定使用JavaScript?
但有一个警告:我做了谷歌,我能找到的最好的解决方案是附加一个onkeypress事件到每个输入,然后检查每次按下的字母是否大写,如果是,然后检查shift是否也按下。如果不是,那么caps lock必须是打开的。这感觉真的很脏,而且…浪费——肯定有比这更好的办法吗?
你如何告诉如果大写锁定使用JavaScript?
但有一个警告:我做了谷歌,我能找到的最好的解决方案是附加一个onkeypress事件到每个输入,然后检查每次按下的字母是否大写,如果是,然后检查shift是否也按下。如果不是,那么caps lock必须是打开的。这感觉真的很脏,而且…浪费——肯定有比这更好的办法吗?
当前回答
上面莫蒂和迭戈·维埃拉的回答是我们最终使用的,现在应该是公认的答案。然而,在我注意到它之前,我写了这个不依赖字符代码的小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的回应
其他回答
你可以试试。增加了一个工作示例。当焦点在输入上时,打开caps lock使led变成红色或绿色。(还没有在mac/linux上测试)
注意:两个版本都适用于我。感谢您在评论中提出建设性意见。
旧版本:https://jsbin.com/mahenes/edit?js,output
另外,这是一个修改后的版本(有人能在mac上测试并确认吗)
新版本:https://jsbin.com/xiconuv/edit?js,output
新版本:
function isCapslock(e) {
const IS_MAC = /Mac/.test(navigator.platform);
const charCode = e.charCode;
const shiftKey = e.shiftKey;
if (charCode >= 97 && charCode <= 122) {
capsLock = shiftKey;
} else if (charCode >= 65 && charCode <= 90
&& !(shiftKey && IS_MAC)) {
capsLock = !shiftKey;
}
return capsLock;
}
旧版本:
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-Z或0-9或'ä', 'ö', 'ü'
上面的键只是示例表示。
在下面的代码,它将显示警报时,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;
}
});
这是一个自定义的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();
});
所以我找到了这个页面,并不是很喜欢我找到的解决方案,所以我想出了一个,并把它提供给你们所有人。对我来说,只有当我输入字母时,大写锁才重要。这段代码为我解决了问题。它快速和简单,给你一个辣椒变量引用,只要你需要它。
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; } });
@user110902发布的这个基于jquery的回答对我很有用。然而,我对它进行了一些改进,以防止@B_N的评论中提到的缺陷:当你按Shift时,它无法检测到CapsLock:
$('#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,它也会工作。