คุณจะบอกได้อย่างไรว่า Caps Lock เปิดใช้งาน JavaScript อยู่

คุณจะบอกได้อย่างไรว่า Caps Lock เปิดใช้งาน JavaScript อยู่

หนึ่งข้อแม้: ฉันทำ google มันและวิธีแก้ปัญหาที่ดีที่สุดที่ฉันสามารถหาได้คือการแนบonkeypressเหตุการณ์ไปยังทุกอินพุตจากนั้นตรวจสอบทุกครั้งว่าจดหมายที่ถูกกดเป็นตัวพิมพ์ใหญ่หรือไม่และถ้าเป็นเช่นนั้น หากไม่เป็นเช่นนั้นต้องเปิดใช้ตัวพิมพ์ใหญ่ นี่รู้สึกสกปรกจริงๆและเพิ่งสิ้นเปลืองแน่นอนว่ามีวิธีที่ดีกว่านี้อีกไหม

คุณสามารถลองได้ .. เพิ่มตัวอย่างการทำงาน เมื่อโฟกัสอยู่ที่อินพุตการเปิดแคปล็อคทำให้ไฟ LED เป็นสีแดงหรือสีเขียว (ยังไม่ได้ทดสอบกับ mac / linux)

หมายเหตุ: ทั้งสองเวอร์ชันใช้งานได้สำหรับฉัน ขอบคุณสำหรับอินพุตที่สร้างสรรค์ในความคิดเห็น

รุ่นเก่า: https://jsbin.com/mahenes/edit?js,output

นอกจากนี้ที่นี่เป็นรุ่นที่ได้รับการแก้ไข (สามารถมีคนทดสอบบน mac และยืนยันได้)

รุ่นใหม่: https://jsbin.com/xiconuv/edit?js,output

เวอร์ชั่นใหม่:

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

เวอร์ชั่นเก่า:

ฟังก์ชั่น 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;

}

สำหรับอักขระนานาชาติสามารถเพิ่มการตรวจสอบเพิ่มเติมสำหรับคีย์ต่อไปนี้ได้ตามต้องการ คุณจะต้องได้รับช่วงรหัสสำหรับตัวละครที่คุณสนใจอาจจะเป็นโดยการใช้คีย์แมปอาเรย์ซึ่งจะเก็บคีย์กรณีการใช้งานที่ถูกต้องทั้งหมดที่คุณกำลังอยู่ ...

ตัวพิมพ์ใหญ่ AZ หรือ 'Ä', 'Ö', 'Ü', ตัวพิมพ์เล็ก aZ หรือ 0-9 หรือ 'ä', 'ö', 'ü'

ปุ่มด้านบนเป็นเพียงตัวอย่างเท่านั้น

ใน jQuery

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

หลีกเลี่ยงความผิดพลาดเช่นปุ่ม Backspace ที่ s.toLowerCase() !== sเป็นสิ่งจำเป็น

คุณสามารถใช้ a KeyboardEventเพื่อตรวจสอบคีย์จำนวนมากรวมถึงตัวพิมพ์ใหญ่ในเบราว์เซอร์ล่าสุด

getModifierStateฟังก์ชั่นจะให้รัฐสำหรับ:

• Alt
• AltGraph
• CapsLock
• ควบคุม
• Fn (Android)
• Meta
• ล็อคหมายเลข
• ระบบปฏิบัติการ (Windows & Linux)
• ScrollLock
• เปลี่ยน

การสาธิตนี้ใช้ได้กับเบราว์เซอร์หลักทั้งหมดรวมถึงมือถือ ( caniuse )

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

คุณสามารถตรวจสอบการล็อคตัวพิมพ์ใหญ่โดยใช้ "เป็นตัวอักษรตัวพิมพ์ใหญ่และไม่กดปุ่ม Shift" โดยใช้การกดปุ่มบนเอกสาร แต่คุณควรแน่ใจว่าไม่มีตัวกดปุ่มตัวจัดการอื่นปรากฏฟองเหตุการณ์ก่อนที่จะถึงตัวจัดการเอกสาร

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

คุณสามารถคว้าเหตุการณ์ในระหว่างขั้นตอนการจับภาพในเบราว์เซอร์ที่สนับสนุนสิ่งนั้น แต่ดูเหมือนไม่มีประโยชน์เลยเพราะมันจะไม่ทำงานบนเบราว์เซอร์ทั้งหมด

ฉันไม่สามารถนึกถึงวิธีอื่นในการตรวจสอบสถานะการล็อคตัวพิมพ์ใหญ่ การตรวจสอบนั้นง่ายอยู่แล้วและหากพิมพ์ตัวอักษรที่ตรวจไม่ได้ดีแล้ว ... การตรวจจับก็ไม่จำเป็น

มีบทความเกี่ยวกับ 24 วิธีในปีที่ผ่านมา ค่อนข้างดี แต่ขาดการสนับสนุนอักขระนานาชาติ (ใช้toUpperCase()เพื่อหลีกเลี่ยงปัญหานั้น)

คำตอบที่มีอยู่จำนวนมากจะตรวจสอบแคปล็อคเมื่อไม่กด Shift แต่จะไม่ตรวจสอบหากกด Shift และรับเป็นตัวพิมพ์เล็กหรือจะตรวจสอบว่า แต่จะไม่ตรวจสอบว่าแคปล็อคถูกปิดหรือจะตรวจสอบว่า จะพิจารณาว่าคีย์ที่ไม่ใช่ตัวอักษรเป็น 'ปิด' นี่คือโซลูชัน jQuery ที่ได้รับการปรับแต่งซึ่งจะแสดงคำเตือนหากกดแป้นตัวอักษรด้วยปุ่มกด (กะหรือไม่เลื่อน) จะปิดคำเตือนหากกดแป้นโดยไม่ใช้ปุ่มกด แต่จะไม่เปิดหรือปิดคำเตือน กดหมายเลขหรือปุ่มอื่น ๆ

$("#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 สิ่งนี้ครอบคลุมถึงการจัดการเหตุการณ์ใน Firefox และจะตรวจสอบทั้งตัวพิมพ์ใหญ่และตัวพิมพ์เล็กที่ไม่คาดคิด สิ่งนี้จะสันนิษฐาน<input id="password" type="password" name="whatever"/>องค์ประกอบและองค์ประกอบแยกต่างหากที่มีรหัส ' 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();
    }
});

คำตอบยอดนิยมที่นี่ไม่ทำงานสำหรับฉันด้วยเหตุผลสองประการ (รหัสที่ไม่มีความคิดเห็นที่มีลิงก์ตายและวิธีแก้ไขที่ไม่สมบูรณ์) ดังนั้นฉันจึงใช้เวลาสองสามชั่วโมงในการทดลองและทำให้ดีที่สุดเท่าที่จะทำได้: นี่คือของฉันรวมถึง jQuery และไม่ใช่ jQuery

jQuery

โปรดทราบว่า jQuery ทำให้วัตถุของเหตุการณ์เป็นปกติดังนั้นการตรวจสอบบางอย่างจะหายไป ฉันได้แคบลงไปทุกช่องรหัสผ่าน (เนื่องจากเป็นเหตุผลที่ดีที่สุดที่ต้องการ) และเพิ่มข้อความเตือน สิ่งนี้ได้รับการทดสอบใน Chrome, Mozilla, Opera และ IE6-8 มีเสถียรภาพและจับสถานะการล็อคทั้งหมดยกเว้นเมื่อกดหมายเลขหรือเว้นวรรค

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

โซลูชัน jQuery-less อื่น ๆ บางตัวขาดความล้มเหลวของ IE @ Zappa แก้ไขมัน

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
    }

}

หมายเหตุ: ลองดูโซลูชันของ @Borgar, @Joe Liversedge และ @Zappa และปลั๊กอินที่พัฒนาโดย @Pavel Azanov ซึ่งฉันยังไม่ได้ลอง แต่เป็นความคิดที่ดี หากมีคนรู้วิธีขยายขอบเขตนอกเหนือจาก A-Za-z โปรดแก้ไข นอกจากนี้คำถามนี้รุ่น jQuery จะปิดเหมือนกันดังนั้นฉันจึงโพสต์ทั้งสองที่นี่

เราใช้getModifierStateเพื่อตรวจสอบ Caps Lock onfocusเป็นเพียงสมาชิกคนหนึ่งของเหตุการณ์เมาส์หรือแป้นพิมพ์เพื่อให้เราไม่สามารถใช้ วิธีการทั่วไปสองวิธีที่ฟิลด์รหัสผ่านจะได้รับการโฟกัสคือด้วยการคลิกในหรือแท็บ เราใช้onclickเพื่อตรวจสอบการคลิกเมาส์ภายในอินพุทและเราใช้onkeyupเพื่อตรวจจับแท็บจากฟิลด์อินพุตก่อนหน้า หากฟิลด์รหัสผ่านเป็นฟิลด์เดียวในหน้าเว็บและมีการโฟกัสอัตโนมัติเหตุการณ์จะไม่เกิดขึ้นจนกว่าจะมีการปล่อยคีย์แรกซึ่งก็โอเค แต่ไม่เหมาะคุณต้องการให้คำแนะนำเครื่องมือล็อคแคปเพื่อแสดงเมื่อฟิลด์รหัสผ่านได้รับ โฟกัส แต่สำหรับกรณีส่วนใหญ่โซลูชันนี้ใช้งานได้อย่างมีเสน่ห์

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

ฉันรู้ว่านี่เป็นหัวข้อเก่า แต่คิดว่าฉันจะย้อนกลับไปในกรณีที่ช่วยเหลือผู้อื่น ดูเหมือนว่าจะไม่มีคำตอบสำหรับคำถามนี้ใน IE8 อย่างไรก็ตามฉันพบรหัสนี้ที่ใช้งานได้ใน IE8 (ไม่ได้ทดสอบอะไรด้านล่าง IE8 เลย) สามารถแก้ไขได้อย่างง่ายดายสำหรับ jQuery หากต้องการ

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

และฟังก์ชั่นนี้ถูกเรียกผ่านเหตุการณ์ onkeypress ดังนี้:

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

นี่เป็นวิธีการแก้ปัญหาที่นอกเหนือจากการตรวจสอบสถานะเมื่อมีการเขียนสลับข้อความเตือนทุกครั้งที่Caps Lockกดปุ่ม (มีข้อ จำกัด บางอย่าง)

นอกจากนี้ยังรองรับตัวอักษรที่ไม่ใช่ภาษาอังกฤษนอกช่วง AZ เนื่องจากตรวจสอบตัวอักษรสตริงกับtoUpperCase()และtoLowerCase()แทนที่จะตรวจสอบกับช่วงอักขระ

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

โปรดทราบว่าการสังเกตการสลับใช้ตัวพิมพ์ใหญ่จะมีประโยชน์เฉพาะเมื่อเรารู้สถานะของตัวพิมพ์ใหญ่ก่อนที่Caps Lockจะกดปุ่ม สถานะ caps lock ปัจจุบันถูกเก็บไว้กับcapsคุณสมบัติ JavaScript ในองค์ประกอบรหัสผ่าน นี่คือการตั้งค่าเป็นครั้งแรกที่เรามีการตรวจสอบของรัฐแคปล็อคเมื่อผู้ใช้กดตัวอักษรที่สามารถเป็นตัวพิมพ์เล็กหรือใหญ่ หากหน้าต่างสูญเสียการโฟกัสเราจะไม่สามารถสังเกตเห็นการสลับสลับแคปล็อคได้ดังนั้นเราจึงจำเป็นต้องรีเซ็ตเป็นสถานะที่ไม่รู้จัก

เมื่อเร็ว ๆ นี้มีคำถามที่คล้ายกันใน hashcode.com และฉันสร้างปลั๊กอิน jQuery เพื่อจัดการกับมัน นอกจากนี้ยังรองรับการจดจำตัวพิมพ์ใหญ่เมื่อล็อคหมายเลข (บนแป้นล็อครูปแบบแป้นพิมพ์ภาษาเยอรมันมาตรฐานจะมีผลกับตัวเลข)

คุณสามารถตรวจสอบเวอร์ชั่นล่าสุดได้ที่นี่: jquery.capsChecker

สำหรับ jQuery ด้วย twitter bootstrap

ตรวจสอบตัวพิมพ์ใหญ่ถูกล็อคสำหรับตัวละครต่อไปนี้:

ตัวพิมพ์ใหญ่ AZ หรือ 'Ä', 'Ö', 'Ü', '!', '' ',' § ',' $ ','% ','% ',' & ',' / ',' (',') ' , '=', ':', ';', '*', '' '

ตัวพิมพ์เล็ก aZ หรือ 0-9 หรือ 'ä', 'ö', 'ü', '.', ',', ',' + ',' # '

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

ตัวแปรที่แสดงสถานะการล็อคตัวพิมพ์ใหญ่:

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

ใช้ได้กับทุกเบราว์เซอร์ => canIUse

คำตอบที่อิง jQuery ที่โพสต์โดย @ user110902 มีประโยชน์สำหรับฉัน อย่างไรก็ตามฉันปรับปรุงให้ดีขึ้นเล็กน้อยเพื่อป้องกันข้อบกพร่องที่กล่าวถึงในความคิดเห็นของ @B_N: การตรวจสอบ CapsLock ล้มเหลวขณะที่คุณกด 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');
    }
});

เช่นนี้มันจะทำงานแม้ในขณะที่กด Shift

รหัสนี้จะตรวจจับตัวพิมพ์ใหญ่ไม่ว่ากรณีหรือถ้ากดปุ่ม Shift:

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

ฉันเขียนไลบรารีชื่อcapsLockซึ่งทำในสิ่งที่คุณต้องการ

เพียงรวมไว้ในหน้าเว็บของคุณ:

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

จากนั้นใช้ดังต่อไปนี้:

alert(capsLock.status);

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

ดูตัวอย่าง: http://jsfiddle.net/3EXMd/

สถานะจะได้รับการอัพเดตเมื่อคุณกดปุ่ม Caps Lock ใช้แฮ็กปุ่ม Shift เพื่อตรวจสอบสถานะที่ถูกต้องของปุ่ม Caps Lock เท่านั้น falseในขั้นต้นสถานะเป็น ดังนั้นจงระวัง

ยังมีอีกเวอร์ชั่นที่ชัดเจนและเรียบง่ายจัดการ capsLock ที่เลื่อนได้และไม่ จำกัด Ascii ฉันคิดว่า:

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

แก้ไข: Sense of capsLockOn ถูกกลับรายการ, doh, fixed

แก้ไข # 2:หลังจากตรวจสอบเพิ่มเติมฉันได้ทำการเปลี่ยนแปลงเล็กน้อยโค้ดรายละเอียดเพิ่มเติมเล็กน้อยน่าเสียดาย แต่มันจัดการการกระทำที่เหมาะสมมากขึ้น

• การใช้ e.charCode แทน e.keyCode และการตรวจสอบค่า 0 จะข้ามการกดคีย์ที่ไม่ใช่อักขระจำนวนมากโดยไม่ต้องเข้ารหัสสิ่งที่เฉพาะเจาะจงกับภาษาหรือชุดอักขระที่กำหนด จากความเข้าใจของฉันมันเข้ากันได้น้อยลงเบราว์เซอร์รุ่นเก่าหรือที่ไม่ใช่กระแสหลักหรือมือถืออาจไม่ทำงานตามที่รหัสนี้คาดหวัง แต่มันก็คุ้มค่าสำหรับสถานการณ์ของฉัน

• การตรวจสอบกับรายการของรหัสเครื่องหมายวรรคตอนที่รู้จักกันป้องกันไม่ให้พวกเขาถูกมองว่าเป็นเชิงลบที่ผิดเนื่องจากพวกเขาไม่ได้รับผลกระทบจากการล็อคแคป หากไม่มีสิ่งนี้ไฟแสดงสถานะ Caps Lock จะถูกซ่อนเมื่อคุณพิมพ์อักขระเครื่องหมายวรรคตอนใด ๆ โดยการระบุชุดที่แยกออกแทนที่จะเป็นชุดที่รวมไว้มันควรจะเข้ากันได้กับอักขระส่วนขยาย นี่เป็นบิตที่น่ารังเกียจและพิเศษที่สุดและมีโอกาสที่ภาษาที่ไม่ใช่ตะวันตกมีเครื่องหมายวรรคตอนและ / หรือรหัสเครื่องหมายวรรคตอนที่แตกต่างกันพอที่จะเป็นปัญหา

เกิดปฏิกิริยา

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 เพราะมันใช้ได้ดีสำหรับฉัน

ฉันสร้างโค้ดฟังก์ชั่นเพื่อให้สามารถนำกลับมาใช้ใหม่และเชื่อมโยงกับเนื้อหาในกรณีของฉัน มันสามารถเชื่อมโยงไปยังเขตข้อมูลรหัสผ่านเฉพาะในกรณีที่คุณต้องการ

<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 ของและดิเอโกอิรา การตอบสนองดังกล่าวข้างต้นเป็นสิ่งที่เราสิ้นสุดการใช้และควรจะเป็นคำตอบที่ได้รับการยอมรับในขณะนี้ อย่างไรก็ตามก่อนที่ฉันจะสังเกตเห็นฉันได้เขียนฟังก์ชั่นจาวาสคริปต์เล็ก ๆ ที่ไม่พึ่งพารหัสตัวอักษร ...

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

จากนั้นเรียกมันในตัวจัดการเหตุการณ์อย่างนั้น capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)

แต่อีกครั้งเราลงเอยด้วยการใช้ @Mottie s และ @Diego Vieira

ในรหัสด้านล่างนี้มันจะแสดงการแจ้งเตือนเมื่อ Caps Lock เปิดและพวกเขากดปุ่มโดยใช้กะ

ถ้าเรากลับเท็จ ถ่านในปัจจุบันจะไม่ผนวกเข้ากับหน้าข้อความ

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

ลองใช้โค้ดที่เข้าใจง่ายและเข้าใจง่าย

นี่คือสคริปต์

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

และ Html

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

ลองใช้รหัสนี้

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

โชคดี :)

คุณสามารถใช้สคริปต์นี้ มันควรจะทำงานได้ดีบน Windows แม้ว่าจะกดปุ่ม Shift แต่มันจะไม่ทำงานบน Mac OS ถ้าเป็นเช่นนั้น

นี่คือปลั๊กอิน jquery ที่กำหนดเองโดยใช้ jquery ui ประกอบด้วยแนวคิดที่ดีทั้งหมดในหน้านี้และใช้ประโยชน์จากวิดเจ็ตทูลทิป ข้อความ Caps Lock จะถูกนำไปใช้กับกล่องรหัสผ่านทั้งหมดโดยอัตโนมัติและไม่จำเป็นต้องเปลี่ยนแปลง html ปัจจุบันของคุณ

กำหนดรหัสปลั๊กอินเอง ...

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

ใช้กับองค์ประกอบรหัสผ่านทั้งหมด ...

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

รหัส 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>

ตอนนี้เราจำเป็นต้องเชื่อมโยงสคริปต์นี้โดยใช้ Html

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

ฉันรู้มาช้าแล้ว แต่สิ่งนี้อาจเป็นประโยชน์กับคนอื่นได้

ดังนั้นนี่คือทางออกที่ง่ายที่สุดของฉัน (มีตัวอักษรตุรกี);

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

ดังนั้นฉันจึงพบหน้านี้และไม่ชอบวิธีแก้ปัญหาที่ฉันพบดังนั้นฉันจึงคิดออกและเสนอให้คุณทุกคน สำหรับฉันมันจะสำคัญก็ต่อเมื่อเปิดล็อคแคปถ้าฉันพิมพ์ตัวอักษร รหัสนี้แก้ปัญหาให้ฉันได้ มันง่ายและรวดเร็วและให้ตัวแปร capsIsOn ให้คุณอ้างอิงทุกครั้งที่คุณต้องการ

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

เมื่อคุณพิมพ์ถ้า caplock เปิดอยู่มันสามารถแปลงถ่านปัจจุบันเป็นตัวพิมพ์เล็กได้โดยอัตโนมัติ ด้วยวิธีนี้แม้ว่า caplocks จะเปิดอยู่มันจะไม่ทำงานเหมือนอยู่ในหน้าปัจจุบัน เพื่อแจ้งให้ผู้ใช้ของคุณทราบคุณสามารถแสดงข้อความที่แจ้งว่ามีการเปิด caplocks แต่รายการฟอร์มจะถูกแปลง

มีวิธีที่ง่ายกว่ามากสำหรับการตรวจจับตัวพิมพ์ใหญ่:

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