Bagaimana Anda tahu jika caps lock aktif menggunakan JavaScript?


242

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?


198
KARENA CARA TERLALU BANYAK PENGGUNA SAYA MENGISI DALAM BENTUK MEREKA SEPERTI INI.
nickf

7
@nicf: Jika itu alasannya, mengapa Anda tidak menjalankan regexp pada input dan meminta mereka untuk berhenti berteriak jika ada terlalu banyak huruf besar?
sekitar

155
Ada alasan yang lebih baik untuk melakukan ini. Jika pengguna memasukkan kata sandi, akan sangat berguna untuk memperingatkan mereka jika capslock mereka aktif.
T Nguyen

23
Sepertinya browser harus menerapkan "caps lock pada" peringatan ketika jenis pengguna ke input type=passwordbidang (mirip dengan validasi alamat email untuk input type=emaildi krom, dll)
nothingisnecessary

8
Pertanyaan yang sangat bagus, tetapi jawaban yang diterima adalah 8 tahun. Respons yang lebih baik ada di sini
Mac

Jawaban:


95

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.


1
Ini mungkin bukan implementasi terbaik tetapi ketika saya menulisnya saya berusaha membuatnya tetap sederhana. Saya pikir satu-satunya cara Anda benar-benar dapat melakukannya dengan kejelekan yang Anda butuhkan untuk menutupi berbagai browser.

2
Saya telah menemukan bahwa menggunakan ini dengan keydown (dalam chrome) menyebabkan semua kode diambil sebagai huruf besar. Jika saya menggunakan penekanan tombol itu berfungsi.
Tim

2
Menemukan setiap kombinasi karakter yang mungkin untuk semua karakter internasional pasti akan kehilangan beberapa kasus. Gunakan metode ToUpper / Lower untuk memeriksa casing.
awe

3
Mengejutkan bahwa jawaban yang benar-benar salah - kode karakter yang membingungkan dan ascii (!!!) - bisa mendapatkan banyak dukungan. Tidak ada yang pernah memeriksa ???
GameAlchemist

1
Perhatikan bahwa menurut Mozilla , event.which telah dihapus dari standar Web.
verism

130

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.


5
sebenarnya ... dariCharCode menghilangkan kebutuhan bagi saya untuk memeriksa. Namun perlu dicatat bahwa keydown dan penekanan tombol memberikan kode karakter yang berbeda, yang merupakan kesalahan saya.
Shea

4
-1 bc ini HANYA berfungsi jika mereka tidak menekan shift saat CAPS aktif.

1
Jika ada yang ingin melihat contoh langsung dengan bootstrap sehingga Anda dapat melihat di sini bootply.com/91792
Govinda Rajbhar

Jawaban ini bermanfaat bagi saya. Saya meningkatkan persyaratan dalam jawaban ini , karena cacat yang disebutkan oleh @D_N, bahwa itu tidak berfungsi sambil menekan shift.
SebasSBM

105

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

6
Saya menjawab ini pada pertanyaan dupe / serupa dan telah diperbarui oleh pengguna lain bahwa ini sekarang memiliki dukungan Chrome. Saya mengkonfirmasi ini, jadi sekarang bekerja di semua browser utama - dan harus menjadi solusi terbaik untuk pertanyaan ini
Ian Clark

caniuse.com/#search=getModifierState mengatakan saat ini tidak didukung di Safari (belum?). Jadi di semua browser utama mungkin belum terjadi.
Jens Kooij

2
Ini didukung di Safari sekarang.
Mottie

1
Namun itu mendeteksi pers capslock dan tidak bisa mendapatkan keadaan capslock umum ketika pengguna memasukkan formulir ...
SparK

Ini tampaknya berfungsi kecuali ketika menekan tombol caps lock ke posisi mati . Itu tidak mengambil input itu sampai tekan tombol berikutnya. Ini ada di Chrome untuk OS X. Tidak yakin apakah ini adalah sesuatu yang merentang di seluruh browser dan OS.
Ashraf Slamang

24

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


Ini sebenarnya yang saya cari. Ini bekerja dengan string Latin dan Cyrillic. Terima kasih!
Mladen Janjetovic

Ini bekerja dengan baik, tetapi tombol seperti SPACE dan angka memberi tanda peringatan. Tahu solusi (sama ringkas / elegan)?

1
Juga, ada baiknya Anda perhatikan ketidaklengkapannya, tetapi itu masih belum lengkap. Tidak yakin bagaimana cara memperbaikinya dengan metode ini.

11

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

11

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

Saya tidak yakin mengapa, tetapi metode ini tidak berfungsi pada penekanan tombol pertama (hanya diuji pada Chrome).

Mungkinkah itu masalah persembunyian bidang kosong? Saya tidak bisa menjalankannya dengan benar, setidaknya di Chrome. Itu secara otomatis terjadi di banyak browser lain (setidaknya dalam versi saya, di bawah) karena backspaces menghitung dan mengosongkan mssg.

Catatan : seperti yang telah Anda manfaatkan dengan benar di sini, Anda harus menggunakan keypressacara tersebut untuk menggunakan selubung berbeda pada input, karena keduanya keydowndan keyupakan selalu mengembalikan huruf besar . Akibatnya, ini tidak akan memecat tombol capslock ... jika Anda bermaksud untuk menggabungkan dengane.originalEvent.getModifierState('CapsLock')
KyleMit

6

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.


4
Solusi yang baik harus selalu menyertakan dukungan untuk surat-surat di luar huruf Inggris AZ. Solusi lain adalah penghinaan terhadap hampir semua bahasa non-Inggris.
awe

6

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


Hebat! Sederhana, ringkas, dan tanpa cacat dalam implementasi saya.
Sirtastic

1
@Ryan: Terima kasih atas kontribusinya! Ini adalah contoh kode yang bagus dan bersih, meskipun saya ingin menunjukkan jawaban Anda pada dasarnya sama dengan jawaban Mottie dari tahun 2015, tempat Anda berdua mempekerjakanevent.getModifierState("CapsLock").
Mac

5

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> 

Terima kasih untuk perbaikan IE8. Memasukkannya dalam jawaban saya yang sudah dikerjakan ulang (di bawah). Tapi ini solid.

5

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.


2
Ide bagus. Jika Anda akan menampilkan peringatan kepada pengguna bahwa caps lock aktif, mungkin ide yang baik untuk mematikan peringatan itu segera ketika caps lock dinonaktifkan, jika tidak, Anda mungkin membingungkan pengguna.
Ajedi32

3

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


3

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


3

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


1
Terpilih karena memberikan jawaban terbaru untuk pertanyaan lama. Anda mungkin ingin menambahkan sesuatu seperti tajuk berita yang mengatakan sesuatu seperti "Untuk peramban modern (2017->) coba ini" atau "Perbarui untuk 2017"
eon

3

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.


2

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

Ini menyebabkan ruang dan backspace untuk mendeteksi sebagai huruf besar pada Firefox.
Adrian Rosca

2

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.


Ini adalah solusi yang sangat cerdik. Tetapi ada bug bahwa jika Caps Lock aktif ketika halaman mendapatkan fokus, objek "capslock" dimulai dengan keadaan salah (mati).
Ric

Memang itu dimulai dengan keadaan yang salah. Namun ketika Anda menekan tombol apa saja itu secara otomatis memperbaiki keadaannya. Jika Anda dapat menemukan cara untuk mengaturnya ke kondisi yang benar ketika halaman mendapatkan fokus maka saya akan sangat senang untuk menggabungkan kode Anda.
Aadit M Shah

2

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.


2

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

1

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>

1

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


0

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

Hanya berfungsi jika caps lock aktif. Jika caps lock tidak aktif, masih dilaporkan bahwa caps lock aktif tetapi dengan tombol shift ditekan (keduanya dengan tombol shift benar-benar ditekan atau tidak).
awe

Ok Maaf tentang itu @awe
Naga Harish M

0

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> 

0

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


0

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.


0

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

0

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> 

0

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

0

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


-1

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.


Ya, tapi Anda tetap harus mendeteksi caps lock. Plus, ini berarti Anda tidak mengizinkan kata sandi dalam huruf besar, yang kurang optimal.
Dave Liepmann

untuk mendeteksi apakah caps lock aktif, Anda harus memeriksa apakah versi huruf kecil dari char yang Anda kirim berbeda dari itu, jika -> caps lock, maka «Peringatan: Anda menggunakan caps lock tetapi sistem kami mengonversi huruf kecil », saya kira javascript tidak dimaksudkan untuk mendeteksi caps lock setelah semua (memeriksa caps lock memerlukan akses sistem), Anda harus menemukan jalan di sekitar yang paling sesuai dengan kebutuhan Anda
Frederik.L

-1

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;
    }
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.