Как я могу обнаружить ключ Caps Lock вкл/выкл с помощью jQuery? У меня есть пароль textbox, и я допускаю только строчные буквы, поэтому я не хочу, чтобы кнопка Caps Lock была включена.
Можно ли определить состояние клавиши Caps Lock с помощью jQuery?
Как обнаружить Caps Lock с помощью Javascript.
function capLock(e){
var kc = e.keyCode ? e.keyCode : e.which;
var sk = e.shiftKey ? e.shiftKey : kc === 16;
var visibility = ((kc >= 65 && kc <= 90) && !sk) ||
((kc >= 97 && kc <= 122) && sk) ? 'visible' : 'hidden';
document.getElementById('divMayus').style.visibility = visibility
}
Затем для вашей формы пароля:
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
Существует плагин jQuery, называемый caplockstate, который будет контролировать состояние ключа блокировки кол-ва на всей странице, а не только в определенных полях.
Вы можете запросить состояние ключа блокировки колпачков или определить, что прослушиватели событий реагируют на изменения состояния.
Плагин делает лучшую работу по обнаружению и управлению состоянием, чем другие предложения здесь, в том числе работу с неанглийскими клавиатурами, контроль за использованием самого ключа Caps Lock и не забывание состояния, если введены не-альфа-символы.
Есть два демо, один, показывающий привязку основного события, а другой показывает предупреждение только тогда, когда поле пароля имеет фокус.
например.
$(document).ready(function() {
/*
* Bind to capslockstate events and update display based on state
*/
$(window).bind("capsOn", function(event) {
$("#statetext").html("on");
});
$(window).bind("capsOff", function(event) {
$("#statetext").html("off");
});
$(window).bind("capsUnknown", function(event) {
$("#statetext").html("unknown");
});
/*
* Additional event notifying there has been a change, but not the state
*/
$(window).bind("capsChanged", function(event) {
$("#changetext").html("changed").show().fadeOut();
});
/*
* Initialize the capslockstate plugin.
* Monitoring is happening at the window level.
*/
$(window).capslockstate();
// Call the "state" method to retreive the state at page load
var initialState = $(window).capslockstate("state");
$("#statetext").html(initialState);
});
и
$(document).ready(function() {
/*
* Bind to capslockstate events and update display based on state
*/
$(window).bind("capsOn", function(event) {
if ($("#Passwd:focus").length > 0) {
$("#capsWarning").show();
}
});
$(window).bind("capsOff capsUnknown", function(event) {
$("#capsWarning").hide();
});
$("#Passwd").bind("focusout", function(event) {
$("#capsWarning").hide();
});
$("#Passwd").bind("focusin", function(event) {
if ($(window).capslockstate("state") === true) {
$("#capsWarning").show();
}
});
/*
* Initialize the capslockstate plugin.
* Monitoring is happening at the window level.
*/
$(window).capslockstate();
});
Код для плагина доступен для просмотра на GitHub.
Но ты что-то забыл. Если вы нажмете клавишу "capslock" и "shift and type", не появится сообщение "caps on".
Вот исправленная версия:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script language="Javascript">
$(document).ready(function(){
$('input').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)){
if($('#capsalert').length < 1) $(this).after('<b id="capsalert">CapsLock is on!</b>');
} else {
if($('#capsalert').length > 0 ) $('#capsalert').remove();
}
});
});
</script>
</head>
<body>
<label style="float:left;display:block;width:80px;">Login:</label><input type="text" /><br />
<label style="float:left;display:block;width:80px;">Password:</label><input type="password" /><br />
</body>
Я нашел лучший способ сделать это с помощью jquery: таким образом вы можете обнаружить, когда пользователь нажимает клавишу "каплок", пользователю не нужно вводить письмо для проверки: (пользователю нужно ввести не менее 1 ключа для запуска обнаружение капсулы) demo: http://arthurfragoso.onphp.net/codes/capslock.html
<html><head><title>Checking Caps Lock using Jquery - Javascript</title></head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<form action="/codes/capslock.html" id="formid">
<div>
User:
</div>
<div>
<input type="text" id="user" />
</div>
<div>
Password:
</div>
<div>
<input type="password" id="password" />
</div>
<div id="capslockdiv" style="display: none; color: red;">
Caps Lock On
</div>
<div>
<input type="submit" />
</div>
</form>
<script>
$(document).ready(
function () {
check_capslock_form($('#formid')); //applies the capslock check to all input tags
}
);
document.onkeydown = function (e) { //check if capslock key was pressed in the whole window
e = e || event;
if (typeof (window.lastpress) === 'undefined') { window.lastpress = e.timeStamp; }
if (typeof (window.capsLockEnabled) !== 'undefined') {
if (e.keyCode == 20 && e.timeStamp > window.lastpress + 50) {
window.capsLockEnabled = !window.capsLockEnabled;
$('#capslockdiv').toggle();
}
window.lastpress = e.timeStamp;
//sometimes this function is called twice when pressing capslock once, so I use the timeStamp to fix the problem
}
};
function check_capslock(e) { //check what key was pressed in the form
var s = String.fromCharCode(e.keyCode);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) {
window.capsLockEnabled = true;
$('#capslockdiv').show();
}
else {
window.capsLockEnabled = false;
$('#capslockdiv').hide();
}
}
function check_capslock_form(where) {
if (!where) { where = $(document); }
where.find('input,select').each(function () {
if (this.type != "hidden") {
$(this).keypress(check_capslock);
}
});
}
</script>
</body>
</html>
Что я делаю, выдается предупреждение, когда
Это довольно плохая идея, чтобы разрешить только небольшие буквы. Вы сокращаете количество возможных паролей огромным количеством, делая это.
После того, как пользователь создал свой пароль, когда он вводит его во время входа в систему, вы можете просто преобразовать его в нижний регистр на сервере, прежде чем проверять его правильность.
Сохраняет усилия для пользователя таким образом.