Làm thế nào để bạn biết nếu mũ khóa đang sử dụng JavaScript?

Làm thế nào để bạn biết nếu mũ khóa đang sử dụng JavaScript?

Mặc dù vậy, một điều lưu ý: Tôi đã google nó và giải pháp tốt nhất tôi có thể tìm thấy là đính kèm một onkeypresssự kiện vào mỗi đầu vào, sau đó kiểm tra mỗi lần nếu chữ được nhấn là chữ hoa và nếu có thì hãy kiểm tra xem sự thay đổi cũng được giữ. Nếu không, do đó, khóa mũ phải được bật. Điều này cảm thấy thực sự bẩn và chỉ ... lãng phí - chắc chắn có cách nào tốt hơn thế này?

Bạn có thể dùng thử .. Đã thêm một ví dụ hoạt động. Khi lấy nét ở đầu vào, bật khóa mũ làm cho đèn led chuyển sang màu đỏ nếu không sẽ có màu xanh. (Chưa được thử nghiệm trên mac / linux)

LƯU Ý: Cả hai phiên bản đều hoạt động với tôi. Cảm ơn cho đầu vào xây dựng trong các ý kiến.

PHIÊN BẢN CŨ: https://jsbin.com/mahenes/edit?js,output

Ngoài ra, đây là phiên bản sửa đổi (ai đó có thể kiểm tra trên mac và xác nhận)

PHIÊN BẢN MỚI: https://jsbin.com/xiconuv/edit?js,output

PHIÊN BẢN MỚI:

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

PHIÊN BẢN CŨ:

hàm 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;

}

Đối với các ký tự quốc tế, có thể thêm kiểm tra bổ sung cho các khóa sau nếu cần. Bạn phải lấy phạm vi mã khóa cho các ký tự mà bạn quan tâm, có thể bằng cách sử dụng một mảng sơ đồ phím sẽ chứa tất cả các khóa trường hợp sử dụng hợp lệ mà bạn đang xử lý ...

chữ hoa AZ hoặc 'Ä', '', 'Ü', chữ thường aZ hoặc 0-9 hoặc 'ä', 'ö', 'ü'

Các phím trên chỉ là đại diện mẫu.

Trong jQuery,

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

Tránh nhầm lẫn, như phím backspace, s.toLowerCase() !== slà cần thiết.

Bạn có thể sử dụng một KeyboardEvent để phát hiện nhiều khóa bao gồm khóa mũ trên hầu hết các trình duyệt gần đây.

Các getModifierStatechức năng sẽ cung cấp nhà nước cho:

• Alt
• Văn phòng
• Phím Caps Lock
• Điều khiển
• Fn (Android)
• Meta
• NumLock
• Hệ điều hành (Windows & Linux)
• Cuộn khóa
• Ca

Bản demo này hoạt động trong tất cả các trình duyệt chính bao gồm cả thiết bị di động ( caniuse ).

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

Bạn có thể phát hiện khóa mũ bằng cách sử dụng "là chữ in hoa và không nhấn phím" bằng cách sử dụng phím bấm trên tài liệu. Nhưng sau đó, bạn nên chắc chắn rằng không có trình xử lý nhấn phím nào khác bật bong bóng sự kiện trước khi nó đến trình xử lý trên tài liệu.

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

Bạn có thể lấy sự kiện trong giai đoạn bắt giữ trong các trình duyệt hỗ trợ điều đó, nhưng có vẻ hơi vô nghĩa vì nó sẽ không hoạt động trên tất cả các trình duyệt.

Tôi không thể nghĩ ra bất kỳ cách nào khác để thực sự phát hiện trạng thái khóa mũ. Việc kiểm tra dù sao cũng đơn giản và nếu các ký tự không thể phát hiện được gõ, thì ... việc phát hiện là không cần thiết.

Có một bài viết về 24 cách trong năm ngoái. Khá tốt, nhưng thiếu hỗ trợ nhân vật quốc tế (sử dụngtoUpperCase() để có được xung quanh đó).

Nhiều câu trả lời hiện tại sẽ kiểm tra khóa mũ khi không nhấn shift nhưng sẽ không kiểm tra nếu bạn nhấn shift và lấy chữ thường, hoặc sẽ kiểm tra xem nhưng sẽ không kiểm tra khóa mũ bị tắt hay sẽ kiểm tra xem sẽ coi các phím không phải là alpha là 'tắt'. Dưới đây là một giải pháp jQuery được điều chỉnh sẽ hiển thị cảnh báo nếu phím alpha được nhấn bằng mũ (shift hoặc không thay đổi), sẽ tắt cảnh báo nếu phím alpha được nhấn mà không có mũ, nhưng sẽ không tắt hoặc bật cảnh báo khi số hoặc các phím khác được nhấn.

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

Trong JQuery. Điều này bao gồm việc xử lý sự kiện trong Firefox và sẽ kiểm tra cả ký tự chữ hoa và chữ thường. Điều này giả định trước một <input id="password" type="password" name="whatever"/>yếu tố và một yếu tố riêng biệt với id ' capsLockWarning' có cảnh báo mà chúng tôi muốn hiển thị (nhưng bị ẩn đi nếu không).

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

Các câu trả lời hàng đầu ở đây không phù hợp với tôi vì một vài lý do (mã chưa được nhận xét có liên kết chết và giải pháp không đầy đủ). Vì vậy, tôi đã dành vài giờ để thử mọi người và nhận được thứ tốt nhất có thể: đây là của tôi, bao gồm cả jQuery và không phải jQuery.

jQuery

Lưu ý rằng jQuery bình thường hóa đối tượng sự kiện nên một số kiểm tra bị thiếu. Tôi cũng đã thu hẹp nó vào tất cả các trường mật khẩu (vì đó là lý do lớn nhất cần nó) và thêm một thông báo cảnh báo. Điều này đã được thử nghiệm trong Chrome, Mozilla, Opera và IE6-8. Ổn định và bắt tất cả các trạng thái capslock NGOẠI TRỪ khi nhấn số hoặc dấu cách.

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

Không có jQuery

Một số giải pháp không có jQuery khác thiếu dự phòng IE. @Zappa đã vá nó.

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
    }

}

Lưu ý: Kiểm tra các giải pháp của @Borgar, @Joe Liversedge và @Zappa và plugin được phát triển bởi @Pavel Azanov, tôi chưa thử nhưng là một ý tưởng hay. Nếu ai đó biết cách mở rộng phạm vi ngoài A-Za-z, vui lòng chỉnh sửa đi. Ngoài ra, các phiên bản jQuery của câu hỏi này được đóng lại dưới dạng trùng lặp, vì vậy đó là lý do tại sao tôi đăng cả hai ở đây.

Chúng tôi sử dụng getModifierStateđể kiểm tra khóa mũ, nó chỉ là thành viên của sự kiện chuột hoặc bàn phím nên chúng tôi không thể sử dụng onfocus. Hai cách phổ biến nhất mà trường mật khẩu sẽ lấy được trọng tâm là nhấp chuột vào hoặc tab. Chúng tôi sử dụng onclickđể kiểm tra nhấp chuột trong đầu vào và chúng tôi sử dụngonkeyup để phát hiện tab từ trường nhập trước đó. Nếu trường mật khẩu là trường duy nhất trên trang và được tự động tập trung thì sự kiện sẽ không xảy ra cho đến khi khóa đầu tiên được phát hành, điều này ổn nhưng không lý tưởng, bạn thực sự muốn các mẹo của công cụ khóa mũ hiển thị khi trường mật khẩu tăng tập trung, nhưng đối với hầu hết các trường hợp, giải pháp này hoạt động như một nét duyên dáng.

HTML

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

Mã não

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

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

Tôi biết đây là một chủ đề cũ nhưng nghĩ rằng tôi sẽ phản hồi lại trong trường hợp nó giúp được người khác. Không có câu trả lời nào cho câu hỏi dường như hoạt động trong IE8. Tuy nhiên tôi đã tìm thấy mã này hoạt động trong IE8. (Havent đã thử nghiệm mọi thứ bên dưới IE8). Điều này có thể dễ dàng sửa đổi cho jQuery nếu cần.

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

Và hàm được gọi thông qua sự kiện onkeypress như thế này:

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

Đây là một giải pháp, ngoài việc kiểm tra trạng thái khi viết, còn bật thông báo cảnh báo mỗi lần Caps Lock nhấn phím (với một số hạn chế).

Nó cũng hỗ trợ các chữ cái không phải tiếng Anh bên ngoài phạm vi AZ, vì nó kiểm tra ký tự chuỗi toUpperCase()và toLowerCase()thay vì kiểm tra phạm vi ký tự.

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

Lưu ý rằng việc quan sát khóa nắp bật tắt chỉ hữu ích nếu chúng ta biết trạng thái của khóa mũ trước khi Caps Locknhấn phím. Trạng thái khóa mũ hiện tại được giữ với thuộc tính capsJavaScript trên thành phần mật khẩu. Điều này được đặt lần đầu tiên chúng ta có xác nhận trạng thái khóa mũ khi người dùng nhấn một chữ cái có thể viết hoa hoặc viết thường. Nếu cửa sổ mất tiêu điểm, chúng ta không còn có thể quan sát khóa mũ đang bật, vì vậy chúng ta cần đặt lại về trạng thái không xác định.

Gần đây có một câu hỏi tương tự trên hashcode.com và tôi đã tạo một plugin jQuery để đối phó với nó. Nó cũng hỗ trợ nhận dạng khóa mũ trên số. (Trên khóa mũ bố trí bàn phím tiêu chuẩn của Đức có hiệu lực về số).

Bạn có thể kiểm tra phiên bản mới nhất tại đây: jquery.capsChecker

Dành cho jQuery với twitter bootstrap

Kiểm tra mũ bị khóa cho các ký tự sau:

chữ hoa AZ hoặc 'Ä', '', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')' , '=', ':', ';', '*', '' '

chữ thường aZ hoặc 0-9 hoặc 'ä', 'ö', 'ü', '.', ',', '+', '#'

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

bản demo trực tiếp trên jsfiddle

Một biến hiển thị trạng thái khóa mũ:

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

hoạt động trên tất cả các trình duyệt => canIUse

Câu trả lời dựa trên jQuery này được đăng bởi @ user110902 rất hữu ích cho tôi. Tuy nhiên, tôi đã cải thiện một chút để ngăn một lỗ hổng được đề cập trong bình luận của @B_N: nó không phát hiện ra CapsLock trong khi bạn nhấn 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');
    }
});

Như thế này, nó sẽ hoạt động ngay cả khi nhấn Shift.

Mã này phát hiện khóa mũ bất kể trường hợp nào hoặc nếu nhấn phím 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');
    }
});

Tôi đã viết một thư viện gọi là capsLock , chính xác những gì bạn muốn nó làm.

Chỉ cần đưa nó vào các trang web của bạn:

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

Sau đó sử dụng nó như sau:

alert(capsLock.status);

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

Xem bản demo: http://jsfiddle.net/3EXMd/

Trạng thái được cập nhật khi bạn nhấn phím Caps Lock. Nó chỉ sử dụng hack phím Shift để xác định trạng thái chính xác của phím Caps Lock. Ban đầu tình trạng là false. Cẩn thận.

Một phiên bản khác, rõ ràng và đơn giản, xử lý capsLock đã dịch chuyển và không bị ràng buộc với ascii tôi nghĩ:

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

Chỉnh sửa: Cảm giác của capsLockOn đã bị đảo ngược, doh, đã sửa.

Chỉnh sửa # 2: Sau khi kiểm tra thêm điều này, tôi đã thực hiện một vài thay đổi, không may là mã chi tiết hơn một chút, nhưng nó xử lý nhiều hành động phù hợp hơn.

• Sử dụng e.charCode thay vì e.keyCode và kiểm tra 0 giá trị bỏ qua rất nhiều phím bấm không có ký tự, mà không mã hóa bất cứ thứ gì cụ thể cho một ngôn ngữ hoặc bảng mã cụ thể. Theo hiểu biết của tôi, nó hơi kém tương thích, vì vậy các trình duyệt di động cũ hơn, không chính thống hoặc di động có thể không hoạt động như mã này mong đợi, nhưng dù sao nó cũng đáng giá, đối với tình huống của tôi.

• Việc kiểm tra danh sách các mã chấm câu đã biết sẽ ngăn không cho chúng bị coi là phủ định sai, vì chúng không bị ảnh hưởng bởi khóa mũ. Không có điều này, chỉ báo khóa mũ sẽ bị ẩn khi bạn nhập bất kỳ ký tự dấu chấm câu nào. Bằng cách chỉ định một bộ loại trừ, thay vì một bộ được bao gồm, nó sẽ tương thích hơn với các ký tự mở rộng. Đây là bit xấu nhất, đặc biệt nhất và có một số khả năng các ngôn ngữ ngoài phương Tây có đủ dấu chấm câu và / hoặc dấu chấm câu khác nhau là một vấn đề, nhưng một lần nữa, nó đáng để IMO, ít nhất là đối với tình huống của tôi.

Phản ứng

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

Dựa trên câu trả lời của @joshuahedlund vì nó hoạt động tốt với tôi.

Tôi đã tạo mã thành một hàm để nó có thể được sử dụng lại và liên kết nó với phần thân trong trường hợp của tôi. Nó chỉ có thể được liên kết với trường mật khẩu nếu bạn thích.

<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 của và Diego Vieira của phản ứng trên là những gì chúng ta đã kết thúc việc sử dụng và nên là câu trả lời được chấp nhận bây giờ. Tuy nhiên, trước khi tôi nhận thấy nó, tôi đã viết hàm javascript nhỏ này không dựa vào mã ký tự ...

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

Sau đó gọi nó trong một xử lý sự kiện như vậy capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)

Nhưng một lần nữa, cuối cùng chúng tôi chỉ sử dụng phản hồi của @Mottie và @Diego Vieira

Trong đoạn mã dưới đây, nó sẽ hiển thị cảnh báo khi Caps bị khóa và họ nhấn phím bằng shift.

nếu chúng ta trả lại sai; sau đó char hiện tại sẽ không nối vào trang văn bản.

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

Hãy thử mã đơn giản này để dễ hiểu

Đây là tập lệnh

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

Và Html

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

cố gắng sử dụng mã này

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

Chúc may mắn :)

Bạn có thể sử dụng tập lệnh này . Nó sẽ hoạt động tốt trên Windows ngay cả khi nhấn phím Shift nhưng nó sẽ không hoạt động trên Mac OS nếu vậy.

Dưới đây là một plugin jquery tùy chỉnh, sử dụng jquery ui, được tạo thành từ tất cả các ý tưởng hay trên trang này và tận dụng widget tooltip. Thông báo khóa mũ được tự động áp dụng tất cả các hộp mật khẩu và không yêu cầu thay đổi đối với html hiện tại của bạn.

Cắm mã tùy chỉnh ...

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

Áp dụng cho tất cả các yếu tố mật khẩu ...

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

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

Bây giờ chúng ta cần liên kết tập lệnh này bằng Html

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

tôi biết là muộn nhưng, điều này có thể giúp ích cho người khác.

Vì vậy, đây là giải pháp đơn giản nhất của tôi (với ký tự Thổ Nhĩ Kỳ);

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

Vì vậy, tôi đã tìm thấy trang này và không thực sự thích các giải pháp tôi đã tìm thấy vì vậy tôi đã tìm ra một giải pháp và cung cấp nó cho tất cả các bạn. Đối với tôi, nó chỉ quan trọng nếu khóa mũ được bật nếu tôi đang gõ chữ cái. Mã này đã giải quyết vấn đề cho tôi. Nó nhanh chóng và dễ dàng và cung cấp cho bạn một biến capsIsOn để tham khảo bất cứ khi nào bạn cần.

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

Khi bạn nhập, nếu caplock được bật, nó có thể tự động chuyển đổi char hiện tại thành chữ thường. Theo cách đó, ngay cả khi caplocks được bật, nó sẽ không hoạt động như trên trang hiện tại. Để thông báo cho người dùng của bạn, bạn có thể hiển thị một văn bản nói rằng caplocks được bật, nhưng các mục nhập mẫu được chuyển đổi.

Có một giải pháp đơn giản hơn nhiều để phát hiện mũ khóa:

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