如何使用 JavaScript / jQuery 检查大写锁定是否打开/关闭？

工作是使用 JavaScript 和 jQuery 确定大写锁定是打开还是关闭。

使用 JavaScript 检查大写锁定是否打开/关闭：

• addEventListener() 方法：此方法向文档添加事件处理程序。

  句法：

  document.addEventListener(event, function, useCapture)
  

  参数：

  • 事件：此参数是必需的。它指定字符串，事件的名称。
  • 函数：此参数是必需的。它指定事件发生时要运行的函数。当事件发生时，一个事件对象作为第一个参数传递给函数。类型取决于指定的事件。例如，“click”事件属于 MouseEvent 对象。
  • useCapture：该参数是可选的。它指定一个布尔值，这意味着事件应该在捕获阶段还是在冒泡阶段执行。
    • true：事件处理程序在捕获阶段执行。
    • false：事件处理程序在冒泡阶段执行。

示例 1：此示例向文档添加了一个事件侦听器，当它发生时，它会调用一个匿名函数来处理此事件。它通过使用按钮的keyCode来检查它是否是 CAPS LOCK 或 SHIFT 键。

 
 
     
         
            Check caps lock is on or not
             
     
      
    
           
         
            GeeksForGeeks 
        
          
        
        
          
        
        
          
        
            var up = document.getElementById('GFG_UP');
              
            up.innerHTML = 
                "Type anywhere on the page to check if CAPS LOCK is ON";
              
            var down = document.getElementById('GFG_DOWN');     
              
            document.addEventListener('keypress', function(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) {
                    down.innerHTML = "Caps Lock is On";
                    return;
                }
                if (charCode >= 65 && charCode <= 90 && !shifton) {
                    down.innerHTML = "Caps Lock is On";
                    return;
                }
                down.innerHTML = "Caps Lock is Off";
                return;
            });     
         
     
                    

输出：

• 在单击文档之前：
  
• 点击文档后：
  

示例 2：此示例向文档添加了一个事件侦听器，当它发生时，它会检查是否按下了 CAPS LOCK。

 
 
     
         
            Check caps lock is on or not
             
     
      
    
           
         
            GeeksForGeeks 
        
          
        
        
          
        
        
          
        
            var up = document.getElementById('GFG_UP');
            up.innerHTML = "Press the CAPS LOCK";
            var down = document.getElementById('GFG_DOWN');     
              
            document.addEventListener("keyup", function(event) {
                if (event.getModifierState("CapsLock")) {
                    down.innerHTML = "CAPS LOCK is On";
                } else {
                    down.innerHTML = "CAPS LOCK is Off";
                }
            });
         
     
                    

输出：

• 在单击文档之前：
  
• 点击文档后：
  

使用 jQuery 检查大写锁定是否打开/关闭：

• jQuery on() 方法：该方法为被选元素和子元素添加一个或多个事件处理程序。

  句法：

  $(selector).on(event, childSelector, data, function, map)

  参数：

  • 事件：此参数是必需的。它指定一个或多个事件或命名空间以附加到所选元素。如果有多个事件值，它们之间用空格分隔。事件必须是有效的。
  • childSelector：这个参数是可选的。它指定事件处理程序应该只附加到定义的子元素。
  • 数据：该参数是可选的。它指定要传递给函数的附加数据。
  • 函数：此参数是必需的。它指定事件发生时要运行的函数。
  • map：它指定了一个事件映射（{event:func(), event:func(), …}）具有一个或多个要添加到所选元素的事件，以及在事件发生时运行的函数。
• JavaScript String toUpperCase() 方法：此方法将字符串转换为大写字母。

  句法：

  string.toUpperCase()

  返回值：它返回一个字符串，表示转换为大写的字符串的值。

• JavaScript String toLowerCase() 方法：此方法将字符串转换为小写字母。

  句法：

  string.toLowerCase()

  返回值：它返回一个字符串，表示转换为小写的字符串的值。

示例 1：此示例向文档正文添加了一个事件侦听器，当它发生时，它调用一个匿名函数来处理此事件。它通过使用toUpperCase(), toLowerCase() 和 shiftkey来检查它是否是 CAPS LOCK 或 SHIFT 键。

 
 
     
         
            Check caps lock is on or not
        
          
        
         
     
  
     
  
         
            GeeksForGeeks 
        
  
        
        
  
        
        
  
        
            $('#GFG_UP').
            text("Type anywhere on the page to check if CAPS LOCK is ON");
              
            $("#body").on('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)) {
                        $('#GFG_DOWN').text("Caps Lock is ON");
                    } 
                    else if ((s.toLowerCase() === s && s.toUpperCase() !== s
                    && !e.shiftKey) || (s.toLowerCase() !== s 
                    && s.toUpperCase() === s && e.shiftKey)) { 
                        $('#GFG_DOWN').text("Caps Lock is OFF");
                    } 
            });
         
     
                    

输出：

• 在文档上打字之前：
  
• 在文档上键入后：
  

示例 2：此示例与前一个示例执行相同的操作，但采用不同的方法。向文档添加一个事件侦听器，当它发生时，它会检查是否按下了 CAPS LOCK。

 
 
     
         
            Check caps lock is on or not
        
          
        
         
     
  
     
  
         
            GeeksForGeeks 
        
  
        
        
          
        
        
          
        
            $('#GFG_UP').text("Turn On the Caps Lock and type on screen");
            $('#body').on('keypress', function(e) { 
                var s = String.fromCharCode( e.which );
                if ( (s.toUpperCase() === s && !e.shiftKey) || 
                        (s.toLowerCase() === s && e.shiftKey) ) {
                    alert('Caps Lock is on');
                } else {
                    alert('Caps Lock is off');
                }
                  
            });
         
     
                    

输出：

• 在文档上打字之前：
  
• 在文档上键入后：