Bagaimana Anda tahu jika caps lock aktif menggunakan JavaScript?

Bagaimana Anda tahu jika caps lock aktif menggunakan JavaScript?

Namun satu peringatan: Saya melakukan google itu dan solusi terbaik yang bisa saya temukan adalah melampirkan onkeypressacara untuk setiap input, kemudian memeriksa setiap kali apakah huruf yang ditekan adalah huruf besar, dan jika ya, maka periksa apakah shift juga ditekan. Jika tidak, maka caps lock harus diaktifkan. Ini terasa sangat kotor dan hanya ... boros - pasti ada cara yang lebih baik dari ini?

Anda dapat mencobanya .. Menambahkan contoh yang berfungsi. Saat fokus pada input, menyalakan caps lock membuat led menjadi merah jika tidak hijau. (Belum diuji di mac / linux)

CATATAN: Kedua versi berfungsi untuk saya. Terima kasih atas masukan yang membangun dalam komentar.

VERSI LAMA: https://jsbin.com/mahenes/edit?js,output

Juga, ini adalah versi yang dimodifikasi (dapat seseorang menguji di mac dan mengonfirmasi)

VERSI BARU: https://jsbin.com/xiconuv/edit?js,output

VERSI BARU:

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

VERSI LAMA:

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;

}

Untuk karakter internasional, cek tambahan dapat ditambahkan untuk tombol-tombol berikut ini sesuai kebutuhan. Anda harus mendapatkan rentang kode kunci untuk karakter yang Anda minati, mungkin dengan menggunakan array keymapping yang akan menampung semua kunci kasus penggunaan yang valid yang Anda tangani ...

huruf besar AZ atau 'Ä', 'Ö', 'Ü', huruf kecil aZ atau 0-9 atau 'ä', 'ö', 'ü'

Kunci di atas hanyalah representasi sampel.

Di jQuery,

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

Hindari kesalahan, seperti kunci backspace, s.toLowerCase() !== sdiperlukan.

Anda dapat menggunakan a KeyboardEventuntuk mendeteksi banyak kunci termasuk kunci tutup pada sebagian besar browser terbaru.

The getModifierStateFungsi akan memberikan negara untuk:

• Alt
• AltGraph
• Kunci huruf kapital
• Kontrol
• Fn (Android)
• Meta
• NumLock
• OS (Windows & Linux)
• ScrollLock
• Bergeser

Demo ini berfungsi di semua browser utama termasuk ponsel ( caniuse ).

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

Anda dapat mendeteksi caps lock menggunakan "huruf besar dan tidak ada shift ditekan" dengan menggunakan penekanan tombol pada dokumen. Tetapi kemudian Anda lebih baik memastikan bahwa tidak ada pawang tombol penekanan lain yang meletuskan gelembung acara sebelum sampai ke pawang pada dokumen.

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

Anda bisa mengambil acara selama fase penangkapan di browser yang mendukung itu, tetapi tampaknya tidak ada gunanya karena tidak akan berfungsi pada semua browser.

Saya tidak bisa memikirkan cara lain untuk benar-benar mendeteksi status caps lock. Pemeriksaannya sederhana saja dan jika karakter yang tidak terdeteksi diketik, ya ... maka mendeteksi itu tidak perlu.

Ada artikel tentang 24 cara tentang ini tahun lalu. Cukup bagus, tetapi tidak memiliki dukungan karakter internasional (gunakan toUpperCase()untuk menyiasati itu).

Banyak jawaban yang ada akan memeriksa caps lock aktif ketika shift tidak ditekan tetapi tidak akan memeriksanya jika Anda menekan shift dan mendapatkan huruf kecil, atau akan memeriksa untuk itu tetapi tidak juga akan memeriksa caps lock dimatikan, atau akan memeriksa tetapi akan menganggap kunci non-alfa sebagai 'tidak aktif'. Berikut ini adalah solusi jQuery yang diadaptasi yang akan menampilkan peringatan jika kunci alpha ditekan dengan huruf besar (bergeser atau tidak bergeser), akan mematikan peringatan jika tombol alfa ditekan tanpa huruf besar, tetapi tidak akan mematikan peringatan atau ketika angka atau tombol lainnya ditekan.

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

Di JQuery. Ini mencakup penanganan acara di Firefox dan akan memeriksa karakter huruf besar dan kecil yang tidak terduga. Ini mengandaikan <input id="password" type="password" name="whatever"/>elemen dan elemen terpisah dengan id ' capsLockWarning' yang memiliki peringatan yang ingin kami tampilkan (tetapi disembunyikan sebaliknya).

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

Jawaban teratas di sini tidak berfungsi untuk saya karena beberapa alasan (kode tidak dikomentari dengan tautan mati dan solusi tidak lengkap). Jadi saya menghabiskan beberapa jam untuk mencoba semua orang dan mendapatkan yang terbaik yang bisa saya lakukan: ini milik saya, termasuk jQuery dan non-jQuery.

jQuery

Perhatikan bahwa jQuery menormalkan objek acara sehingga beberapa pemeriksaan hilang. Saya juga mempersempitnya ke semua bidang kata sandi (karena itulah alasan terbesar untuk membutuhkannya) dan menambahkan pesan peringatan. Ini telah diuji di Chrome, Mozilla, Opera, dan IE6-8. Stabil dan menangkap semua kondisi capslock KECUALI ketika angka atau spasi ditekan.

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

Tanpa jQuery

Beberapa solusi jQuery-kurang lainnya tidak memiliki fallbacks IE. @Zappa menambalnya.

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
    }

}

Catatan: Lihat solusi @Borgar, @Joe Liversedge, dan @Zappa, dan plugin yang dikembangkan oleh @Pavel Azanov, yang belum saya coba tetapi merupakan ide yang bagus. Jika seseorang mengetahui cara untuk memperluas cakupan di luar A-Za-z, harap sunting. Juga, versi jQuery dari pertanyaan ini ditutup sebagai duplikat, jadi itu sebabnya saya memposting keduanya di sini.

Kami gunakan getModifierStateuntuk memeriksa caps lock, itu hanya anggota acara mouse atau keyboard sehingga kami tidak dapat menggunakan onfocus. Dua cara yang paling umum untuk bidang kata sandi untuk mendapatkan fokus adalah dengan mengklik atau tab. Kami menggunakan onclickuntuk memeriksa klik mouse dalam input, dan kami menggunakanonkeyup untuk mendeteksi tab dari bidang input sebelumnya. Jika bidang kata sandi adalah satu-satunya bidang pada halaman dan fokus otomatis maka peristiwa tersebut tidak akan terjadi sampai kunci pertama dilepaskan, yang ok tapi tidak ideal, Anda benar-benar ingin caps caps tool tips untuk ditampilkan setelah bidang kata sandi bertambah fokus, tetapi untuk sebagian besar kasus solusi ini berfungsi seperti pesona.

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

Saya tahu ini adalah topik lama tetapi saya pikir saya akan memberi umpan balik jika itu membantu orang lain. Tidak ada jawaban untuk pertanyaan yang tampaknya berfungsi di IE8. Namun saya menemukan kode ini yang berfungsi di IE8. (Havent menguji apa pun di bawah IE8). Ini dapat dengan mudah dimodifikasi untuk jQuery jika diperlukan.

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

Dan fungsinya dipanggil melalui event onkeypress seperti ini:

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

Ini adalah solusi yang, selain memeriksa keadaan saat menulis, juga mengaktifkan pesan peringatan setiap kali Caps Lock tombol ditekan (dengan beberapa batasan).

Ini juga mendukung huruf non-Inggris di luar rentang AZ, karena memeriksa karakter string terhadap toUpperCase()dan toLowerCase()bukannya memeriksa terhadap rentang karakter.

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

Perhatikan bahwa mengamati togel kunci penguncian hanya berguna jika kita mengetahui keadaan kunci caps sebelum Caps Lockkunci ditekan. Status kunci caps saat ini disimpan dengan capsproperti JavaScript pada elemen kata sandi. Ini diatur saat pertama kali kami memiliki validasi status caps lock ketika pengguna menekan huruf yang bisa menjadi huruf besar atau kecil. Jika jendela kehilangan fokus, kita tidak lagi dapat mengamati toggling kunci caps, jadi kita perlu mengatur ulang ke keadaan yang tidak diketahui.

Baru-baru ini ada pertanyaan serupa di hashcode.com, dan saya membuat plugin jQuery untuk menghadapinya. Ini juga mendukung pengenalan caps lock pada angka. (Pada kunci papan tombol tata letak Jerman standar memiliki efek pada angka).

Anda dapat memeriksa versi terbaru di sini: jquery.capsChecker

Untuk jQuery dengan bootstrap twitter

Periksa batas huruf untuk karakter berikut:

huruf besar AZ atau 'Ä', 'Ö', 'Ü', '!', '",' § ',' $ ','% ',' & ',' & ',' / ',' (',') ' , '=', ':', ';', '*', '' '

huruf kecil aZ atau 0-9 atau 'ä', 'ö', 'ü', '.', ',', '+', '#'

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

demo langsung di jsfiddle

Variabel yang menunjukkan status caps lock:

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

bekerja di semua browser => canIUse

Jawaban berbasis jQuery ini diposting oleh @ user110902 berguna bagi saya. Namun, saya sedikit memperbaikinya untuk mencegah cacat yang disebutkan dalam komentar @B_N: gagal mendeteksi CapsLock saat Anda menekan Shift:

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

Seperti ini, ini akan berfungsi bahkan saat menekan Shift.

Kode ini mendeteksi caps lock terlepas dari kasing atau jika tombol shift ditekan:

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

Saya menulis sebuah perpustakaan bernama capsLock yang melakukan persis apa yang Anda inginkan.

Cukup sertakan di halaman web Anda:

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

Kemudian gunakan sebagai berikut:

alert(capsLock.status);

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

Lihat demo: http://jsfiddle.net/3EXMd/

Status diperbarui ketika Anda menekan tombol Caps Lock. Ini hanya menggunakan hack tombol Shift untuk menentukan status yang benar dari tombol Caps Lock. Awalnya statusnya adalah false. Waspadalah.

Namun versi lain, jelas dan sederhana, menangani capsLock bergeser, dan tidak terbatas pada ascii saya pikir:

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

Sunting: Sense of capsLockOn dibalik, doh, diperbaiki.

Sunting # 2: Setelah memeriksa ini lagi, saya telah membuat beberapa perubahan, sedikit lebih detail kode sayangnya, tetapi menangani lebih banyak tindakan dengan tepat.

• Menggunakan e.charCode alih-alih e.keyCode dan memeriksa nilai 0 melompati banyak penekanan tombol non-karakter, tanpa mengkode apa pun yang spesifik ke bahasa atau rangkaian karakter tertentu. Dari pemahaman saya, ini sedikit kurang kompatibel, jadi browser yang lebih tua, non-mainstream, atau mobile mungkin tidak berperilaku seperti yang diharapkan oleh kode ini, tetapi tetap sepadan, untuk situasi saya.

• Memeriksa daftar kode tanda baca yang diketahui mencegahnya dilihat sebagai negatif palsu, karena tidak terpengaruh oleh caps lock. Tanpa ini, indikator caps lock disembunyikan ketika Anda mengetik karakter tanda baca mana pun. Dengan menentukan set yang dikecualikan, bukan yang termasuk, itu harus lebih kompatibel dengan karakter yang diperluas. Ini adalah bit yang paling jelek, paling khusus, dan ada beberapa kemungkinan bahwa bahasa non-Barat memiliki tanda baca dan / atau tanda baca yang cukup berbeda untuk menjadi masalah, tapi sekali lagi itu layak untuk IMO, setidaknya untuk situasi saya.

Reaksi

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

Berdasarkan jawaban @ joshuahedlund karena itu berfungsi dengan baik untuk saya.

Saya membuat kode fungsi sehingga dapat digunakan kembali, dan menautkannya ke tubuh dalam kasus saya. Itu dapat ditautkan ke bidang kata sandi hanya jika Anda mau.

<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 ini dan Diego Vieira respon atas adalah apa yang kami akhirnya menggunakan dan harus menjadi jawaban diterima sekarang. Namun, sebelum saya menyadarinya, saya menulis fungsi javascript kecil ini yang tidak bergantung pada kode karakter ...

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

Kemudian menyebutnya dalam event handler seperti itu capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)

Tetapi sekali lagi, kami akhirnya hanya menggunakan tanggapan @Mottie s dan @Diego Vieira

Dalam kode di bawah ini akan ditampilkan peringatan ketika Caps mengunci dan mereka menekan tombol menggunakan shift.

jika kita mengembalikan false; maka char saat ini tidak akan ditambahkan ke halaman teks.

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

coba kode sederhana ini dengan mudah dimengerti

Ini Naskahnya

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

Dan html

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

coba gunakan kode ini.

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

Semoga berhasil :)

Anda dapat menggunakan skrip ini . Ini harus bekerja dengan baik pada Windows bahkan jika tombol Shift ditekan tetapi itu tidak akan bekerja pada Mac OS jika demikian.

Berikut adalah plugin jquery khusus, menggunakan jquery ui, yang terdiri dari semua ide bagus di halaman ini dan memanfaatkan widget tooltip. Pesan caps lock diterapkan secara otomatis ke semua kotak kata sandi dan tidak memerlukan perubahan pada html Anda saat ini.

Kode plug in khusus ...

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

Terapkan ke semua elemen kata sandi ...

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

Kode Javascript

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

Kita sekarang harus mengaitkan skrip ini menggunakan Html

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

sudah terlambat saya tahu tetapi, ini bisa membantu orang lain.

jadi di sini adalah solusi paling sederhana saya (dengan karakter Turki);

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

Jadi saya menemukan halaman ini dan tidak terlalu menyukai solusi yang saya temukan jadi saya menemukan satu dan menawarkannya kepada Anda semua. Bagi saya, itu hanya masalah jika caps lock aktif jika saya mengetik huruf. Kode ini memecahkan masalah bagi saya. Ini cepat dan mudah dan memberi Anda variabel capsIsOn untuk referensi kapan pun Anda membutuhkannya.

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

Saat Anda mengetik, jika caplock aktif, kap karakter saat ini dapat dikonversi menjadi huruf kecil. Dengan begitu, bahkan jika caplock aktif, tidak akan berperilaku seperti itu pada halaman saat ini. Untuk memberi tahu pengguna Anda, Anda dapat menampilkan teks yang mengatakan bahwa caplock aktif, tetapi bahwa entri formulir dikonversi.

Ada solusi yang jauh lebih sederhana untuk mendeteksi caps-lock:

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