Рубрики

Как проверить, включена ли блокировка прописных букв с помощью JavaScript / jQuery?

Задача состоит в том, чтобы определить, включен ли caps lock с помощью JavaScript и jQuery.

Проверьте, включена ли блокировка заглавных букв с помощью JavaScript:

  • addEventListener () Метод: Этот метод добавляет обработчик событий в документ.

    Синтаксис:

    document.addEventListener(event, function, useCapture)
    

    Параметры:

    • событие: этот параметр является обязательным. Здесь указана строка, название события.
    • функция: этот параметр обязателен Определяет функцию, которая запускается при возникновении события. Когда событие происходит, объект события передается в качестве первого параметра функции. Тип зависит от указанного события. Например, событие «click» принадлежит объекту MouseEvent.
    • useCapture: этот параметр не является обязательным. Он определяет логическое значение, которое означает, должно ли событие быть выполнено во время захвата или в фазе всплытия.
      • true: обработчик событий выполняется на этапе захвата.
      • false: обработчик событий выполняется в фазе пузырьков.

Пример 1. Этот пример добавляет прослушиватель событий в документ, и когда это происходит, он вызывает анонимную функцию для обработки этого. Который проверяет, если это CAPS LOCK или SHIFT ключ с помощью keyCode кнопки.

<!DOCTYPE HTML> 

<html

    <head

        <title

            Check caps lock is on or not

        </title>     

    </head

      

    <body style = "text-align:center;">

           

        <h1 style = "color:green;"

            GeeksForGeeks 

        </h1>

          

        <p id = "GFG_UP" style =

            "font-size: 15px; font-weight: bold;">

        </p>

          

        <p id = "GFG_DOWN" style

            "color:green; font-size: 20px; font-weight: bold;">

        </p>

          

        <script>

            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;

            });     

        </script

    </body

</html>                    

Выход:

  • Прежде чем нажать на документ:
  • После нажатия на документ:

Пример 2: В этом примере добавляется прослушиватель событий в документ, и когда это происходит, он проверяет, нажата ли CAPS LOCK или нет.

<!DOCTYPE HTML> 

<html

    <head

        <title

            Check caps lock is on or not

        </title>     

    </head

      

    <body style = "text-align:center;">

           

        <h1 style = "color:green;"

            GeeksForGeeks 

        </h1>

          

        <p id = "GFG_UP" style =

            "font-size: 15px; font-weight: bold;">

        </p>

          

        <p id = "GFG_DOWN" style

            "color:green; font-size: 20px; font-weight: bold;">

        </p>

          

        <script>

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

                }

            });

        </script

    </body

</html>                    

Выход:

  • Прежде чем нажать на документ:
  • После нажатия на документ:

Проверьте, включена ли блокировка заглавных букв с помощью 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: В этом примере добавляется прослушиватель событий в тело документа, и при его возникновении он вызывает анонимную функцию для обработки этого. Который проверяет, является ли он клавишей CAPS LOCK или SHIFT, используя toUpperCase (), toLowerCase () и shiftkey .

<!DOCTYPE HTML> 

<html

    <head

        <title

            Check caps lock is on or not

        </title>

          

        <script src =

"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">

        </script

    </head

  

    <body style = "text-align:center;" id = "body"

  

        <h1 style = "color:green;"

            GeeksForGeeks 

        </h1>

  

        <p id = "GFG_UP" style =

            "font-size: 15px; font-weight: bold;">

        </p>

  

        <p id = "GFG_DOWN" style =

            "color:green; font-size: 20px; font-weight: bold;">

        </p>

  

        <script>

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

                    

            });

        </script

    </body

</html>                    

Выход:

  • Прежде чем печатать на документе:
  • После ввода на документе:

Пример 2: Этот пример делает то же, что и в предыдущем примере, но с другим подходом. Добавляет прослушиватель событий в документ и, когда это происходит, проверяет, нажата ли CAPS LOCK или нет.

<!DOCTYPE HTML> 

<html

    <head

        <title

            Check caps lock is on or not

        </title>

          

        <script src

"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">

        </script

    </head

  

    <body style = "text-align:center;" id = "body"

  

        <h1 style = "color:green;"

            GeeksForGeeks 

        </h1>

  

        <p id = "GFG_UP" style =

            "font-size: 15px; font-weight: bold;">

        </p>

          

        <p id = "GFG_DOWN" style =

            "color:green; font-size: 20px; font-weight: bold;">

        </p>

          

        <script>

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

                }

                  

            });

        </script

    </body

</html>                    

Выход:

  • Прежде чем печатать на документе:
  • После ввода на документе:

Рекомендуемые посты:

Как проверить, включена ли блокировка прописных букв с помощью JavaScript / jQuery?

0.00 (0%) 0 votes