¿Cómo puedo activar/desactivar la tecla Bloq Mayús usando jQuery? Tengo una contraseña textbox, y solo permito letras minúsculas, así que no quiero que la tecla Bloq Mayús esté activada.Detectar bloqueo/desactivación de mayúsculas mediante jQuery
¿Es posible detectar el estado de la tecla Bloq Mayús con jQuery?
lo que hago es poner un aviso cuando
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.
How to detect Caps Lock with 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 de su formulario de contraseña:
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
Después de que el usuario ha creado su contraseña, cuando se entra en él durante inicio de sesión, sólo podría convertirlo en minúsculas en el servidor antes de verificar si es correcto.
Ahorra esfuerzo para el usuario de esa manera.
No creo que deba alterar lo que el usuario envía como contraseña: una contraseña segura contendrá una combinación de mayúsculas y minúsculas –
Pero ha olvidado algo. Si presiona capslock y shift y escribe, no aparecerá el mensaje 'caps is on'.
Aquí es 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>
He encontrado una mejor manera de hacer esto utilizando jQuery: de esta manera se puede detectar cuando el usuario pulse BloqMayus, el usuario no necesita escribir una letra para verificar: (el usuario tiene que escribir al menos 1 tecla para iniciar la detección de la BloqMayus) 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 una jQuery plugin called 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 plugin hace un mejor trabajo de detección y administración estatal que otras sugerencias aquí, incluyendo 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, one showing basic event binding y otra showing the warning only when the password field has focus.
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();
});
The code for the plugin es visible en GitHub.
Esta es la respuesta más completa y escalable – BallisticPugh
@twodayslate +1 valiosa respuesta también ... Pero estaba buscando jquery –
+1, pero ¿por qué hacer variables globales 'kc' y' sk'? Debes declararlos dentro de la función usando 'var'. También '(kc == 16)' ya es una expresión bool, no es necesario envolverlo en '((kc == 16)? True: falso)' – Keith
+1 muy agradable y útil para mí gracias .. . :) – abhi