Detecta el bloqueo de mayúsculas activado/desactivado mediante jQuery
passwords capslock (6)
Esta pregunta ya tiene una respuesta aquí:
¿Cómo puedo activar / desactivar la tecla Bloq Mayús usando jQuery? Tengo un textbox contraseña, y solo permito letras minúsculas, por lo que no quiero que la tecla Bloq Mayús esté activada.
¿Es posible detectar el estado de la tecla Bloq Mayús usando jQuery?
Encontré una mejor manera de hacerlo usando jquery: de esta forma puedes detectar cuándo el usuario presiona capslock, el usuario no necesita escribir una letra para verificar: (el usuario necesita escribir al menos 1 clave para comenzar a detectar el bloqueo de mayúsculas) ) 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>
Hay un complemento de jQuery llamado capslockstate que supervisará el estado de la tecla de bloqueo de mayúsculas en toda la página, no solo en campos específicos.
Puede consultar el estado de la tecla de bloqueo de mayúsculas o definir los detectores de eventos para reaccionar a los cambios de estado.
El complemento hace un mejor trabajo de detección y administración estatal que las otras sugerencias aquí, incluso trabajar con teclados no ingleses, monitorear el uso de la tecla Bloq Mayús y no olvidar el estado si no se escriben caracteres alfabéticos.
Hay dos demostraciones, una que muestra el enlace de eventos básicos y otra que muestra la advertencia solo cuando el campo de la contraseña tiene foco .
p.ej
$(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);
});
y
$(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();
});
El código para el complemento se puede ver en GitHub.
Lo que hago es poner una advertencia cuando
- el nombre de usuario o contraseña es incorrecta y
- el nombre de usuario o la contraseña provistos estaban en mayúsculas.
Es una mala idea dejar solo letras más pequeñas. Estás reduciendo la cantidad de contraseñas posibles en una cantidad enorme haciendo eso.
Pero olvidaste algo. Si presiona capslock y shift y escribe, no aparecerá el mensaje ''caps is on''.
Aquí hay una versión corregida:
<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>
Una vez que el usuario ha creado su contraseña, cuando la está ingresando durante el inicio de sesión, puede convertirla a minúscula en el servidor antes de verificar si es correcta.
Ahorra esfuerzo para el usuario de esa manera.
Cómo detectar Bloq Mayús con 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
}
Luego, para su formulario de contraseña:
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>