Caps lock'un JavaScript kullanarak açık olup olmadığını nasıl anlarsınız?

Caps lock'un JavaScript kullanarak açık olup olmadığını nasıl anlarsınız?

Bir uyarı olsa da: Ben google yaptım ve bulabildiğim en iyi çözüm onkeypress, her girdiye bir olay eklemek , daha sonra basılan harfin büyük harf olup olmadığını kontrol etmek ve eğer öyleyse, vardiya da basılı olup olmadığını kontrol etmek oldu. Değilse, bu nedenle kapak kilidi açık olmalıdır. Bu gerçekten kirli ve sadece ... savurgan - elbette bundan daha iyi bir yol var mı?

Bir deneyebilirsiniz .. Çalışan bir örnek eklendi. Odak girişdeyken, büyük harf kilidini açmak ledin kırmızı yanmasını veya yeşil yanmasını sağlar. (Mac / Linux'ta test edilmedi)

NOT: Her iki sürüm de benim için çalışıyor. Yorumlardaki yapıcı girdiler için teşekkürler.

ESKİ SÜRÜM: https://jsbin.com/mahenes/edit?js,output

Ayrıca, burada değiştirilmiş bir sürüm var (birisi mac üzerinde test yapabilir ve onaylayabilir)

YENİ SÜRÜM: https://jsbin.com/xiconuv/edit?js,output

YENİ SÜRÜM:

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;
}

ESKİ VERSİYON:

işlevi 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;

}

Uluslararası karakterler için, gerektiğinde aşağıdaki tuşlar için ek kontrol eklenebilir. İlgilendiğiniz karakterler için anahtar kodu aralığını almanız gerekir, adreslediğiniz tüm geçerli kullanım durumu anahtarlarını tutacak bir anahtar eşleme dizisi kullanıyor olabilirsiniz ...

büyük AZ veya 'Ä', 'Ö', 'Ü', küçük harf aZ veya 0-9 veya 'ä', 'ö', 'ü'

Yukarıdaki tuşlar sadece örnek sunumdur.

JQuery'de,

$('#example').keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
        alert('caps is on');
    }
});

Geri tuşu gibi, hatadan kaçının s.toLowerCase() !== s.

KeyboardEventEn son tarayıcılarda büyük harf kilidi de dahil olmak üzere çok sayıda tuşu algılamak için a kullanabilirsiniz .

getModifierStateFonksiyon durumunu sağlayacaktır:

• Alt
• AltGraph
• Büyük harf kilidi
• Kontrol
• Fn (Android)
• Meta
• Rakam kilidi
• İşletim Sistemi (Windows ve Linux)
• Kaydırma kilidi
• Vardiya

Bu demo , mobil ( caniuse ) dahil olmak üzere tüm büyük tarayıcılarda çalışır .

passwordField.addEventListener( 'keydown', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  console.log( caps ); // true when you press the keyboard CapsLock key
});

Kapak kilidini, belgede bir tuşa basarak "büyük harf ve kaydırma yok" kullanarak tespit edebilirsiniz. Ancak, olay anahtarını belge üzerindeki işleyiciye ulaşmadan önce başka bir tuşa basma işleyicisinin çıkmadığından emin olmalısınız.

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')
  }
}

Olayı yakalama aşamasında bunu destekleyen tarayıcılarda yakalayabilirsiniz, ancak tüm tarayıcılarda çalışmadığı için biraz anlamsız görünüyor.

Caps lock durumunu algılamanın başka bir yolunu düşünemiyorum. Kontrol yine de basittir ve algılanamayan karakterler yazıldıysa, iyi ... o zaman algılama gerekli değildi.

Orada 24 yollarını konu alan makale bu Geçen yıl. Oldukça iyi, ancak uluslararası karakter desteğinden yoksun ( toUpperCase()bunun üstesinden gelmek için kullanın ).

Birçok mevcut cevap, vardiyaya basılmadığında büyük harf kilidini kontrol eder, ancak üst karakter tuşuna basar ve küçük harf alırsanız kontrol etmez veya bunu kontrol eder, ancak büyük harf kilidinin kapalı olup olmadığını da kontrol etmez veya kontrol eder, ancak alfa olmayan anahtarları 'kapalı' olarak kabul eder. Burada, kapaklı bir alfa tuşuna basıldığında (kaydırma veya kaydırma olmadan) bir uyarı gösterecek, bir alfa tuşuna kapaksız basıldığında uyarı kapanacak, ancak uyarıyı kapatmayacak veya açmayacak uyarlanmış bir jQuery çözümü. numaralara veya diğer tuşlara basılır.

$("#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)
  });

JQuery'de. Bu, Firefox'taki olay işlemeyi kapsar ve hem beklenmeyen büyük hem de küçük harf karakterlerini kontrol eder. Bu , göstermek istediğimiz uyarıyı içeren (ancak aksi halde gizlenen) bir <input id="password" type="password" name="whatever"/>öğeye ve kimliğine sahip ayrı bir öğeyi varsayar capsLockWarning.

$('#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();
    }
});

Buradaki en iyi yanıtlar birkaç nedenden dolayı benim için işe yaramadı (ölü bir bağlantı ve eksik bir çözüm ile yorumlanmamış kod). Bu yüzden herkesi denemek ve elimden gelenin en iyisini yapmak için birkaç saat geçirdim: İşte benimki, jQuery ve jQuery olmayan.

jQuery

JQuery'nin olay nesnesini normalleştirdiğini ve bazı denetimlerin eksik olduğunu unutmayın. Ayrıca tüm şifre alanlarına daralttım (çünkü buna en büyük neden budur) ve bir uyarı mesajı ekledim. Bu, Chrome, Mozilla, Opera ve IE6-8'de test edildi. Sayılara veya boşluklara basıldığında DURDUR ve tüm büyük harf durumlarını yakalar.

/* 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>");

JQuery olmadan

Diğer jQuery'siz çözümlerin bazılarında IE yedekleri yoktu. @ Zappa yamalı.

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
    }

}

Not: @Borgar, @Joe Liversedge ve @Zappa'nın çözümlerine ve @Pavel Azanov tarafından geliştirilen eklentiye göz atın, denemedim ama iyi bir fikir. Birisi kapsamı A-Za-z'nin ötesine genişletmenin bir yolunu biliyorsa, lütfen düzenleyin. Ayrıca, bu sorunun jQuery sürümleri yinelenen olarak kapalı, bu yüzden her ikisini de burada gönderiyorum.

getModifierStateCaps lock'u kontrol etmek için kullanıyoruz , bu sadece bir fare veya klavye etkinliğinin bir üyesi, bu yüzden bir kullanamayız onfocus. Parola alanının odaklanmasının en yaygın iki yolu, bir tıklama veya sekme kullanmaktır. Biz kullanmak onclickgirişi dahilinde bir fare tıklaması kontrol etmek ve kullandığımız onkeyupÖnceki giriş alanından bir sekme algılamak için. Parola alanı sayfadaki tek alansa ve otomatik olarak odaklanmışsa, ilk anahtar bırakılana kadar etkinlik gerçekleşmez, bu tamam, ancak ideal değilse, parola alanı kazanıldığında kapak kilidi aracı ipuçlarının görüntülenmesini gerçekten istersiniz odaklanır, ancak çoğu durumda bu çözüm bir cazibe gibi çalışır.

HTML

<input type="password" id="password" onclick="checkCapsLock(event)" onkeyup="checkCapsLock(event)" />

JS

function checkCapsLock(e) {
  if (e.getModifierState("CapsLock")) {
    console.log("Caps");
  }
}

https://codepen.io/anon/pen/KxJwjq

Bunun eski bir konu olduğunu biliyorum ama başkalarına yardım etmesi durumunda geri besleyeceğimi düşündüm. Sorunun cevaplarının hiçbiri IE8'de işe yaramıyor gibi görünüyor. Ancak IE8 çalışan bu kodu buldunuz. (Havent henüz IE8'in altında bir şey test etmedi). Gerekirse jQuery için kolayca değiştirilebilir.

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';
}

Ve fonksiyon onkeypress olayı ile şöyle çağrılır:

<input type="password" name="txtPassword" onkeypress="capsCheck(event,this);" />
<div id="capsWarningDiv" style="visibility:hidden">Caps Lock is on.</div> 

Bu, yazarken durumu kontrol etmenin yanı sıra, Caps Locktuşa her basıldığında uyarı mesajını da değiştiren bir çözümdür (bazı sınırlamalarla).

O karşı dize karakterini kontrol olarak ayrıca, AZ aralığının dışında olmayan ingilizce harfler destekler toUpperCase()ve toLowerCase()bunun yerine karakter aralığı karşı kontrol etmeyi.

$(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>

Büyük harf kilidi geçişini gözlemlemenin, yalnızca Caps Locktuşa basılmadan önce büyük harf kilidinin durumunu bildiğimizde yararlı olduğunu unutmayın . Geçerli büyük harf kilidi durumu, capsşifre öğesinde bir JavaScript özelliğiyle korunur . Bu, kullanıcı büyük veya küçük harf olabilen bir harfe bastığında büyük harf kilidi durumunu doğruladığımız ilk kez ayarlanır. Pencere odağı kaybederse, artık büyük harf kilidinin geçişini gözlemleyemiyoruz, bu yüzden bilinmeyen bir duruma sıfırlamamız gerekiyor.

Son zamanlarda hashcode.com'da benzer bir soru vardı ve bununla başa çıkmak için bir jQuery eklentisi oluşturdum. Ayrıca sayılar üzerindeki büyük harf kilidinin tanınmasını destekler. (Standart Almanca klavye düzeninde büyük harf kilidinin sayılar üzerinde etkisi vardır).

En son sürümü buradan kontrol edebilirsiniz: jquery.capsChecker

Twitter Bootstrap ile jQuery için

Aşağıdaki karakterler için kilitli kapakları kontrol edin:

büyük AZ veya 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')' , '=', ':', ';', '*', '' '

küçük aZ veya 0-9 veya 'ä', 'ö', 'ü', '.', ',', '+', '#'

/* 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>");

jsfiddle canlı demo

Büyük harf kilidi durumunu gösteren bir değişken:

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;
});

tüm tarayıcılarda çalışır => canIUse

@ User110902 tarafından gönderilen bu jQuery tabanlı cevap benim için yararlı oldu. Ancak, @B_N'nin yorumunda bahsedilen bir kusuru önlemek için biraz geliştirdim: Shift tuşuna bastığınızda CapsLock'u tespit edemedi:

$('#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');
    }
});

Bunun gibi, Shift tuşuna basarken bile çalışacaktır.

Bu kod, durum ne olursa olsun veya üst karakter tuşuna basıldığında büyük harf kilidini algılar:

$('#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');
    }
});

Tam olarak ne yapmak istediğinizi yapan capsLock adlı bir kütüphane yazdım .

Sadece web sayfalarınıza ekleyin:

<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>

Sonra aşağıdaki gibi kullanın:

alert(capsLock.status);

capsLock.observe(function (status) {
    alert(status);
});

Demoyu izleyin : http://jsfiddle.net/3EXMd/

Caps Lock tuşuna bastığınızda durum güncellenir. ÜstKrktr tuş korsanlığını sadece Caps Lock tuşunun doğru durumunu belirlemek için kullanır. Başlangıçta durum false. Bu yüzden sakının.

Yine başka bir sürüm, açık ve basit, kaydırılmış capsLock ele ve sanırım ascii ile sınırlı değil:

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];

Düzenleme: capsLockOn duygusu ters, doh, düzeltildi.

Edit # 2: Bu biraz daha kontrol ettikten sonra, ne yazık ki biraz değişiklik, biraz daha ayrıntılı bir kod yaptım, ancak daha fazla eylem uygun şekilde işler.

• E.keyCode yerine e.charCode kullanılması ve 0 değerlerinin kontrol edilmesi, belirli bir dile veya karakter kümesine özel bir şey kodlamadan, karakter olmayan birçok tuşa basmayı atlar. Anladığım kadarıyla, biraz daha az uyumlu, bu yüzden daha eski, ana akım olmayan veya mobil tarayıcılar bu kodun beklediği gibi davranmayabilir, ancak yine de durumum için buna değer.

• Bilinen noktalama kodları listesine karşı kontrol etmek, bunların büyük harf negatifinden etkilenmediği için yanlış negatif olarak görülmelerini engeller. Bu olmadan, bu noktalama işaretlerinden herhangi birini yazdığınızda büyük harf kilidi göstergesi gizlenir. Dahil edilen bir küme yerine hariç tutulan bir küme belirterek, genişletilmiş karakterlerle daha uyumlu olmalıdır. Bu, en çirkin, en özel-en küçük bit ve Batılı olmayan dillerin bir sorun olacak kadar farklı noktalama ve / veya noktalama kodlarına sahip olma şansı var, ama yine de IMO'ya değer, en azından durumum için.

Tepki

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;
            }
        }
    }

@Joshuahedlund'un cevabına dayanarak benim için iyi çalıştı.

Kodu yeniden kullanılabilir böylece bir işlev yaptı ve benim durumumda vücuda bağladı. Şifre alanına yalnızca tercih ederseniz bağlanabilir.

<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's ve Diego Vieira'nın yukarıdaki yanıtı , kullandığımız şeydir ve şimdi kabul edilen cevap olmalıdır. Ancak, fark etmeden önce, karakter kodlarına dayanmayan bu küçük javascript işlevini yazdım ...

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;
  }
}

Sonra böyle bir olay işleyicisinde çağırın capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)

Ama yine, sadece @Mottie s ve @Diego Vieira'nın yanıtını kullandık

Aşağıdaki kodda, Caps lock açık olduğunda uyarı gösterecek ve shift tuşunu kullanarak tuşa basacaklardır.

yanlış döndürürsek; geçerli karakter metin sayfasına eklenmez.

$('#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;
    }
});

anlaşılması kolay bu basit kodu deneyin

Bu Senaryo

 <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>

Ve Html

<input type="password" name="txtPassword" onkeypress="capLock(event)" />
 <div id="divMayus" style="visibility:hidden">Caps Lock is on.</div> 

bu kodu kullanmaya çalışın.

$('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
});

İyi şanslar :)

Bu komut dosyasını kullanabilirsiniz . Shift tuşuna basılsa bile Windows'ta iyi çalışmalıdır, ancak Mac OS'de çalışmaz.

İşte jquery ui kullanan, bu sayfadaki tüm iyi fikirlerden oluşan ve araç ipucu widget'ını kullanan özel bir jquery eklentisi. Büyük harf kilidi mesajı tüm şifre kutularına otomatik olarak uygulanır ve mevcut HTML'nizde değişiklik yapılmasını gerektirmez.

Özel eklenti kodu ...

(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);

Tüm şifre öğelerine uygula ...

$(function () {
    $(":password").capsLockAlert();
});

Javascript Kodu

<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>

Şimdi bu komut dosyasını Html kullanarak ilişkilendirmemiz gerekiyor

<input type="password" name="txtPassword" onkeypress="isCapLockOn(event)" />
<div id="alert" style="visibility:hidden">Caps Lock is on.</div> 

geç olduğunu biliyorum ama bu başka birine yardımcı olabilir.

işte benim en basit çözümüm (Türk karakterleriyle);

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 = '';
    }
}

Bu sayfayı buldum ve bulduğum çözümleri gerçekten beğenmedim, bu yüzden birini anladım ve hepinize sunuyoruz. Benim için, yalnızca harf kilidi yazdığımda büyük harf kilidinin açık olması durumunda önemlidir. Bu kod benim için sorunu çözdü. Hızlı ve kolay ve ihtiyacınız olduğunda başvurmak için bir capsIsOn değişkeni verir.

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;
  }
});

Yazdığınızda, kapak kilidi açıksa, geçerli karakteri otomatik olarak küçük harfe dönüştürebilir. Bu şekilde kilitler açık olsa bile geçerli sayfada olduğu gibi davranmaz. Kullanıcılarınızı bilgilendirmek için, kilitlerin açık olduğunu ancak form girişlerinin dönüştürüldüğünü belirten bir metin görüntüleyebilirsiniz.

Kapak kilidini algılamak için çok daha basit bir çözüm var:

function isCapsLockOn(event) {
    var s = String.fromCharCode(event.which);
    if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
        return true;
    }
}