Wie sagen Sie, wenn die Feststelltaste ist mit JavaScript?
https://stackoverflow.com/questions/348792
-
20-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Wie sagen Sie, wenn die Feststelltaste ist mit JavaScript?
One caveat though:Ich habe google und die beste Lösung, die ich finden konnte, war Sie zum anfügen einer onkeypress event-zu jedem Eingang, dann überprüfen Sie jedes mal, wenn der Buchstabe gedrückt wurde, werden Großbuchstaben, und wenn es war, dann überprüfen Sie, ob die Umschalttaste, wurde auch gehalten.Wenn es nicht war, daher caps lock muss eingeschaltet sein.Das fühlt sich wirklich schmutzig, und nur... verschwenderisch - sicherlich gibt es einen besseren Weg als diesen?
Lösung
Sie haben diese interessant .... Sie können es versuchen ..
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;
}
Für internationale Zeichen kann zusätzliche Kontrolle für die folgenden Schlüssel je nach Bedarf hinzugefügt werden. Sie haben die keycode Bereich für Zeichen erhalten Sie interessiert sind, unter Verwendung eines Keymapping Array sein kann, die alle gültigen Anwendungsfall Tasten halten Sie ansprechen ...
Groß A-Z oder 'Ä', 'Ö', 'Ü', Kleinbuchstaben a-z oder 0-9 oder 'a', 'o', 'u'
Die obigen Tasten sind nur beispielhafte Darstellung.
Andere Tipps
In jQuery,
$('#example').keypress(function(e) {
var s = String.fromCharCode( e.which );
if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
alert('caps is on');
}
});
Vermeiden Sie den Fehler, wie die Rücktaste, s.toLowerCase() !== s benötigt wird.
Sie können eine KeyboardEvent zu erkennen sind zahlreiche Tasten, darunter die caps lock-auf den meisten aktuellen Browsern.
Die getModifierState Funktion wird die Stand für:
- Alt
- AltGraph
- CapsLock
- Kontrolle
- Fn (Android)
- Meta
- NumLock
- OS (Windows & Linux)
- ScrollLock
- Shift
Diese demo funktioniert in allen gängigen Browsern, einschließlich mobiler (caniuse).
passwordField.addEventListener( 'keydown', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
console.log( caps ); // true when you press the keyboard CapsLock key
});
Sie erkennen können Kappen mit Schloss „ist Buchstaben in Groß- und keine Verschiebung gedrückt“ auf dem Dokument eine keypress Capture verwenden. Aber dann besser Sie sicher sein, dass kein anderer keypress Handler das Ereignisblase erscheint, bevor es auf dem Dokument an den Handler wird.
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')
}
}
Sie können das Ereignis während der Aufnahmephase in Browsern greifen, die das unterstützen, aber es scheint etwas sinnlos, da es auf allen Browsern nicht funktionieren.
Ich kann nicht glauben, der auf andere Weise tatsächlich Erfassungs Kappen Status sperren. Die Prüfung einfach ist sowieso, und wenn nicht nachweisbare Zeichen eingegeben wurden, gut ... dann Nachweis war nicht erforderlich.
Es gab einem Artikel auf 24 Wege auf diesem letzten Jahr. Ganz gut, aber es fehlt internationale Zeichenunterstützung (Verwendung toUpperCase() zu umgehen, dass).
Viele bestehende Antworten überprüfen Kappen auf sperren, wenn Verschiebung nicht gedrückt wird, wird aber für sie nicht, wenn Sie Shift drücken und Klein erhalten, oder wird für das überprüfen, aber nicht auch prüfen Kappen sind aus sperren, oder überprüfen dafür aber nicht-alpha-Tasten als ‚off‘ in Betracht ziehen. Hier ist eine angepasste jQuery-Lösung, die eine Warnung, wenn ein Alpha-Schlüssel wird mit Kappen (Verschiebung oder ohne Shift) gedrückt wird, wird die Warnung deaktivieren, wenn ein Alpha-Taste ohne Deckel gedrückt wird, wird aber nicht schalten Sie die Warnung aus oder ein, wenn sind Zahlen oder andere Tasten gedrückt werden.
$("#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)
});
In JQuery. Dies umfasst die Veranstaltung in Firefox Handhabung und für beide unerwartete Groß- und Kleinbuchstaben überprüfen. Dies setzt voraus, ein <input id="password" type="password" name="whatever"/>element und ein separates Element mit id ‚capsLockWarning‘, die die Warnung, die wir zeigen wollen (aber versteckt sonst).
$('#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();
}
});
Die Top-Antworten hier hat für eine Reihe von Gründen (unkommentiert Code mit einem toten Link und eine unvollständige Lösung) für mich nicht. So verbrachte ich ein paar Stunden jeden heraus versuchen und bekommen die gut ich konnte. Hier ist meins, wie jQuery und nicht-jQuery
jQuery
Beachten Sie, dass jQuery das Ereignisobjekt normalisiert, so dass einige Prüfungen fehlen. Ich habe es auch für alle Passwort-Felder verengt (denn das ist der wichtigste Grund, es zu müssen) und eine Warnmeldung hinzugefügt. Dies wurde in Chrome, Mozilla, Opera und IE6-8 getestet. Stabile und fängt alle capslock Staaten außer wenn Zahlen oder Leerzeichen gedrückt werden.
/* 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>");
Ohne jQuery
Einige der anderen jQuery losen Lösungen fehlten IE-Fallbacks. @Zappa gepatcht es.
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
}
}
Hinweis: Überprüfen Sie die Lösungen von @Borgar, @ Joe Livers aus und @Zappa, und das entwickelte Plugin von @Pavel Azanov, die ich nicht versucht haben, ist aber eine gute Idee. Wenn jemand einen Weg kennt, den Umfang über A-Za-z, bitte bearbeiten weg zu erweitern. Auch jQuery Versionen dieser Frage als Duplikat geschlossen, so dass deshalb ich bin Entsendung beide hier.
Ich weiß, dies ist ein altes Thema, aber dachte, ich würde rückzukoppeln, falls es anderen hilft. Keine der Antworten auf die Frage scheint in IE8 zu arbeiten. Ich habe jedoch diesen Code finden, der in IE8 funktioniert. (Havent getestet alles unter IE8 noch) nicht. Dies kann leicht für jQuery bei Bedarf geändert werden.
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';
}
Und die Funktion wird durch das onkeypress Ereignis wie folgt aufgerufen:
<input type="password" name="txtPassword" onkeypress="capsCheck(event,this);" />
<div id="capsWarningDiv" style="visibility:hidden">Caps Lock is on.</div>
Dies ist eine Lösung, die neben Zustand überprüft beim Schreiben, auch die Warnmeldung jedes Mal wechselt die Caps Lock Taste gedrückt wird (mit einigen Einschränkungen).
Es unterstützt auch nicht-Englisch Buchstaben außerhalb des A-Z-Bereich, da es die Zeichenfolge gegen toUpperCase() und toLowerCase() anstelle der Prüfung gegen Zeichenbereich überprüft.
$(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>
Beachten Sie, dass Caps Lock Hin- und Herschalten Beobachtung nur dann sinnvoll ist, wenn wir den Zustand des Caps Lock vor dem Caps Lock Taste gedrückt wird wissen. Der aktuellen Caps-Lock-Zustand ist mit einer caps JavaScript-Eigenschaft auf dem Passwort Elemente gehalten. Dies ist das erste Mal, dass wir eine Validierung der Kappen haben eingestellten Zustand sperrt, wenn der Benutzer einen Brief drückt die Groß- oder Kleinschreibung sein kann. Wenn das Fenster den Fokus verliert, können wir nicht mehr beobachten Kappenverschluß Makeln, so müssen wir an einen unbekannten Zustand zurückgesetzt werden.
Wir verwenden getModifierState prüfen für Caps Lock, es ist nur ein Mitglied einer Maus oder Tastatur-Ereignis, so dass wir keine onfocus verwenden. Die häufigsten zwei Möglichkeiten, das Passwort-Feld Fokus gewinnen wird, ist mit einem Klick oder einer Registerkarte. Wir verwenden onclick für einen Mausklick im Eingang zu überprüfen, und wir verwenden onkeyup eine Registerkarte aus dem vorherigen Eingabefeld zu erfassen. Wenn das Passwort-Feld das einzige Feld, auf der Seite und wird automatisch fokussiert, dann wird das Ereignis nicht geschehen, bis die erste Taste losgelassen wird, was in Ordnung ist, aber nicht ideal, wollen Sie wirklich Kappen Tooltips sperren, sobald die Passwort-Feld Gewinne anzuzeigen konzentrieren, aber für die meisten Fälle diese Lösung funktioniert wie ein Charme.
HTML
<input type="password" id="password" onclick="checkCapsLock(event)" onkeyup="checkCapsLock(event)" />
JS
function checkCapsLock(e) {
if (e.getModifierState("CapsLock")) {
console.log("Caps");
}
}
Vor kurzem gab es eine ähnliche Frage auf hashcode.com, und ich erstellt damit eine jQuery-Plugin zu beschäftigen. Es unterstützt auch die Erkennung von Kappen auf Zahlen sperren. (Auf der deutschen Standardtastaturlayout Caps Lock hat Auswirkungen auf die Zahlen).
Sie können die neueste Version hier überprüfen: jquery.capsChecker
Für jQuery mit Twitter Bootstrap
Überprüfen Kappen für die folgenden Zeichen gesperrt:
Groß AZ oder 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')', '=', ':', ';', '*', '' '
Kleinbuchstabe a-z oder 0-9 oder 'a', 'o', 'u', ' '',', '+', '#'
/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {
var kc = e.which; // get keycode
var isUpperCase = ((kc >= 65 && kc <= 90) || (kc >= 33 && kc <= 34) || (kc >= 36 && kc <= 39) || (kc >= 40 && kc <= 42) || kc == 47 || (kc >= 58 && kc <= 59) || kc == 61 || kc == 63 || kc == 167 || kc == 196 || kc == 214 || kc == 220) ? true : false; // uppercase A-Z or 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')', '=', ':', ';'
var isLowerCase = ((kc >= 97 && kc <= 122) || (kc >= 48 && kc <= 57) || kc == 35 || (kc >= 43 && kc <= 44) || kc == 46 || kc == 228 || kc == 223 || kc == 246 || kc == 252) ? true : false; // lowercase a-Z or 0-9 or 'ä', 'ö', 'ü', '.', ','
// 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 ((isUpperCase && !isShift) || (isLowerCase && isShift)) {
$(this).next('.form-control-feedback').show().parent().addClass('has-warning has-feedback').next(".capsWarn").show();
} else {
$(this).next('.form-control-feedback').hide().parent().removeClass('has-warning has-feedback').next(".capsWarn").hide();
}
}).after('<span class="glyphicon glyphicon-warning-sign form-control-feedback" style="display:none;"></span>').parent().after("<span class='capsWarn text-danger' style='display:none;'>Is your CAPSLOCK on?</span>");
Eine Variable, die Caps-Lock-Zustand zeigt:
let isCapsLockOn = false;
document.addEventListener( 'keydown', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
if(isCapsLockOn !== caps) isCapsLockOn = caps;
});
document.addEventListener( 'keyup', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
if(isCapsLockOn !== caps) isCapsLockOn = caps;
});
funktioniert auf allen Browsern => canIUse
Dieser Code erkennt Caps Lock, egal, den Fall oder wenn die Shift-Taste gedrückt wird:
$('#password').keypress(function(e) {
var s = String.fromCharCode( e.which );
if ( (s.toUpperCase() === s && !e.shiftKey) ||
(s.toLowerCase() === s && e.shiftKey) ) {
alert('caps is on');
}
});
Ich schrieb eine Bibliothek namens capsLock was genau das tut, was Sie wollen, dass es zu tun.
Nur ob sie auf Ihren Web-Seiten:
<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>
Benutzen Sie diese dann wie folgt:
alert(capsLock.status);
capsLock.observe(function (status) {
alert(status);
});
Sehen Sie die Demo: http://jsfiddle.net/3EXMd/
Der Status wird aktualisiert, wenn Sie die Feststelltaste. Es verwendet nur die Shift-Taste Hack der richtige Status der Feststelltaste zu bestimmen. Zunächst wird der Status false. Also Vorsicht.
Noch eine andere Version, klar und einfach, verschoben Griffe capsLock, und nicht gezwungen zu ascii denke ich:
document.onkeypress = function (e)
{
e = e || window.event;
if (e.charCode === 0 || e.ctrlKey || document.onkeypress.punctuation.indexOf(e.charCode) >= 0)
return;
var s = String.fromCharCode(e.charCode); // or e.keyCode for compatibility, but then have to handle MORE non-character keys
var s2 = e.shiftKey ? s.toUpperCase() : s.toLowerCase();
var capsLockOn = (s2 !== s);
document.getElementById('capslockWarning').style.display = capsLockOn ? '' : 'none';
}
document.onkeypress.punctuation = [33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,91,92,93,94,95,96,123,124,125,126];
Edit:. Sense of capsLockOn wurde umgekehrt, doh, fest
Bearbeiten # 2: Nach dieser Überprüfung heraus einige mehr, ich habe ein paar Änderungen vorgenommen, etwas ausführlichere Code leider, aber es Griffe mehr Aktionen in geeigneter Weise
.-
Mit e.charCode statt e.keyCode und für 0 Werte Überprüfung, eine Menge nicht-Zeichen Drücken von Tasten überspringt, ohne etwas zu Codierung spezifisch für eine bestimmte Sprache oder charset. Von meinem Verständnis ist es etwas weniger kompatibel, so dass älterer, nicht-Mainstream oder mobiler Browser verhält sich nicht wie dieser Code erwartet, aber es lohnt sich, für meine Situation sowieso.
-
Überprüfen anhand einer Liste von bekannten Satz Codes verhindert, dass sie als falsche Negative gesehen zu werden, da sie nicht von Caps Lock betroffen sind. Ohne dies wird die Kappen-Speicheranzeige ausgeblendet, wenn Sie eine dieser Interpunktionszeichen eingeben. Durch einen ausgeschlossenen Satz Angabe eher als ein ein enthalten, sollte es mit erweiterten Zeichen mehr kompatibel sein. Dies ist der hässlichste, Spezial-casiest Bit, und es gibt eine gewisse Chance, dass nicht-westlichen Sprachen haben unterschiedliche genug Zeichensetzung und / oder Satzcodes ein Problem zu sein, aber auch hier lohnt es sich IMO, zumindest für meine Situation.
Reagieren
onKeyPress(event) {
let self = this;
self.setState({
capsLock: isCapsLockOn(self, event)
});
}
onKeyUp(event) {
let self = this;
let key = event.key;
if( key === 'Shift') {
self.shift = false;
}
}
<div>
<input name={this.props.name} onKeyDown={(e)=>this.onKeyPress(e)} onKeyUp={(e)=>this.onKeyUp(e)} onChange={this.props.onChange}/>
{this.capsLockAlert()}
</div>
function isCapsLockOn(component, event) {
let key = event.key;
let keyCode = event.keyCode;
component.lastKeyPressed = key;
if( key === 'Shift') {
component.shift = true;
}
if (key === 'CapsLock') {
let newCapsLockState = !component.state.capsLock;
component.caps = newCapsLockState;
return newCapsLockState;
} else {
if ((component.lastKeyPressed !== 'Shift' && (key === key.toUpperCase() && (keyCode >= 65 && keyCode <= 90)) && !component.shift) || component.caps ) {
component.caps = true;
return true;
} else {
component.caps = false;
return false;
}
}
}
This-jQuery basierte Antwort von @ user110902 geschrieben war nützlich für mich. Allerdings verbessert ich es ein wenig einen Fehler in @B_N ‚s Kommentar erwähnt zu vermeiden: es versäumt Erkennung CapsLock, während Sie die Umschalttaste drücken:
$('#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');
}
});
Wie diese, wird es funktionieren, selbst wenn die Umschalttaste gedrückt wird.
Basierend auf Antwort von @joshuahedlund da es gut für mich gearbeitet.
Ich habe den Code eine Funktion, so dass es wiederverwendet werden kann, und verknüpfen sie mit dem Körper in meinem Fall. Es kann nur mit dem Passwort-Feld verknüpft werden, wenn Sie es vorziehen.
<html>
<head>
<script language="javascript" type="text/javascript" >
function checkCapsLock(e, divId) {
if(e){
e = e;
} else {
e = window.event;
}
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)) {
$(divId).style.display='block';
} else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
(s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
$(divId).style.display='none';
} //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)
}
</script>
<style>
.errorDiv {
display: none;
font-size: 12px;
color: red;
word-wrap: break-word;
text-overflow: clip;
max-width: 200px;
font-weight: normal;
}
</style>
</head>
<body onkeypress="checkCapsLock(event, 'CapsWarn');" >
...
<input name="password" id="password" type="password" autocomplete="off">
<div id="CapsWarn" class="errorDiv">Capslock is ON !</div>
...
</body>
</html>
Mottie der und Diego Vieira Antwort oben ist, was wir am Ende mit und sollen nun die akzeptierte Antwort. Doch bevor ich es bemerkte, schrieb ich diese kleine Javascript-Funktion, die nicht auf Zeichencodes angewiesen ist ...
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;
}
}
Dann rufen Sie es in einem Event-Handler wie so capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)
Aber auch hier landeten wir mit nur @Mottie s und @Diego Vieira Antwort
In diesem Code unten wird es zeigen wachsam sein, wenn die Caps Lock auf und sie drücken Sie die Taste Shift verwenden.
Wenn wir return false; dann wird keine aktuellen char Textseite anhängen.
$('#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;
}
});
versuchen, diese aus einfachen Code in leicht zu verstehen,
Dies ist das Script
<script language="Javascript">
function capLock(e){
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('divMayus').style.visibility = 'visible';
else
document.getElementById('divMayus').style.visibility = 'hidden';
}
</script>
Und die Html
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
versuchen, diesen Code zu verwenden.
$('selectorOnTheInputTextBox').keypress(function (e) {
var charCode = e.target.value.charCodeAt(e.target.value.length - 1)
var capsOn =
e.keyCode &&
!e.shiftKey &&
!e.ctrlKey &&
charCode >= 65 &&
charCode <= 90;
if (capsOn)
//action if true
else
//action if false
});
Good Luck:)
Sie könnten a href verwenden <= "https://www.google.ro/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&uact=8&ved=0CC4QFjAC&url=http%3A%2F%2Fcode .stephenmorley.org% 2Fjavascript% 2Fdetecting-the-Caps-Lock-Taste% 2F & ei = nDQyVLzhOYmWavPJgMgG & usg = AFQjCNH5CGRbar1ueG0wYQ5kL0fPLxlzLA & sig2 = FBTr8S2eXqMgMi9BR45tAw & bvm = bv.76802529, d.d2s“rel = "nofollow"> dieses Skript . Es sollte auch unter Windows arbeiten, auch wenn die Shift-Taste gedrückt wird, aber es wird nicht auf Mac OS arbeiten, wenn so.
Hier ist eine benutzerdefinierte jQuery-Plugin, jQuery UI verwenden, die aus all den guten Ideen auf dieser Seite und nutzt den Tooltip-Widget. Die Caps Lock Nachricht Auto ist es, alle Passwort-Boxen angelegt und erfordert keine Änderungen an Ihrem aktuellen html.
Benutzerdefinierte Stecker in Code ...
(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);
auf alle Passwort-Elemente ...
$(function () {
$(":password").capsLockAlert();
});
Javascript-Code
<script type="text/javascript">
function isCapLockOn(e){
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('alert').style.visibility = 'visible';
else
document.getElementById('alert').style.visibility = 'hidden';
}
</script>
Wir brauchen jetzt dieses Skript mit Hilfe von HTML
assoziieren<input type="password" name="txtPassword" onkeypress="isCapLockOn(event)" />
<div id="alert" style="visibility:hidden">Caps Lock is on.</div>
es ist spät, ich weiß aber, dies sonst hilfreich jemand sein kann.
so ist hier meine simpliest Lösung (mit türkischen Zeichen);
function (s,e)
{
var key = e.htmlEvent.key;
var upperCases = 'ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZXWQ';
var lowerCases = 'abcçdefgğhıijklmnoöprsştuüvyzxwq';
var digits = '0123456789';
if (upperCases.includes(key))
{
document.getElementById('spanLetterCase').innerText = '[A]';
}
else if (lowerCases.includes(key))
{
document.getElementById('spanLetterCase').innerText = '[a]';
}
else if (digits.includes(key))
{
document.getElementById('spanLetterCase').innerText = '[1]';
}
else
{
document.getElementById('spanLetterCase').innerText = '';
}
}
So fand ich diese Seite und nicht wirklich wie die Lösungen fand ich so dachte ich ein und es anbiete, um alle Ihnen. Für mich ist es nur wichtig, wenn die Caps Lock auf, wenn ich Briefe tippen bin. Dieser Code löste das Problem für mich. Seine schnell und einfach und gibt Ihnen eine capsIsOn Variable zu verweisen, wenn Sie es brauchen.
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;
}
});
Wenn Sie eingeben, wenn caplock eingeschaltet ist, kann es automatisch die aktuelle char konvertieren in Kleinbuchstaben. Auf diese Weise, selbst wenn caplocks eingeschaltet ist, wird es nicht so verhalten, wie es auf der aktuellen Seite ist. Informieren Sie Ihre Nutzer könnten Sie einen Text anzeigen sagen, dass caplocks eingeschaltet ist, aber dass die Formulareinträge umgewandelt werden.
Es gibt eine viel einfachere Lösung zur Erkennung caps-lock:
function isCapsLockOn(event) {
var s = String.fromCharCode(event.which);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
return true;
}
}
