Caps Lock in React: Tips and Tricks for User-Friendly Form Design

When creating a sign-up form in JavaScript, several vital components must be considered to make the form user-friendly, secure, and functional. Giving your users the best experience while also making the process hassle-free gives your more credibility as a front-end developer who is keen on giving the best user experience.

Let me quickly list most of the components a signup form is most likely to have; this will set the tone for the topic here. A signup form can comprise the following;

• Form elements: At the most basic level, a sign-up form will need to include form elements such as text fields, checkboxes, and radio buttons to collect user information. These form elements can be created using HTML and styled using CSS to match the design of the website.

• Form validation: To ensure that users submit accurate and complete information, form validation should be implemented using JavaScript. This can include checking for empty fields, validating email addresses, and verifying password strength.

• Error messages: If a user submits incorrect or incomplete information, it is important to provide clear and helpful error messages that explain what went wrong and how to fix it. These messages should be displayed next to the relevant form field and styled in a way that makes them stand out.

• Submission handling: Once the user has completed the form and clicked the submit button, the data needs to be sent to the server for processing. This can be done using JavaScript's built-in fetch or with a library like Axios.

• Security measures: To protect user data from being intercepted or compromised during transmission, the sign-up form should be secured using SSL/TLS encryption. In addition, it is important to implement measures such as password hashing and input sanitization to prevent SQL injection attacks.

That was just a bonus tip for any beginner out there, but have you ever wondered how most forms detect when you have the capslock key turned on or off? This also kept me wondering for a while, but let's digest this concept in Form validation.

One way to detect caps lock in React is to use the getModifierState() method available on the KeyboardEvent object. This method returns a boolean value indicating whether a specific keyboard modifier key is currently active. To detect caps lock, we can check whether the Caps Lock modifier key is active.

Here's an example of how to use the getModifierState() method to detect caps lock in a React app: I'll be adding some tailwind classes to the code sample. You can style your component as you wish.

import React from "react";
import { KeyboardEvent } from 'react';

function CapslockTest() {
  function handleKeyPress(event: KeyboardEvent<HTMLInputElement>) {
    const capsLockOn: boolean = event.getModifierState('CapsLock');

    // Display a warning message if Caps Lock is on
    if (capsLockOn) {
      alert('Caps Lock is on');
    } else {
      alert('capslock is off');
    }
  }
  return (
    <div className="flex-1 min-h-screen flex items-center justify-center">
      <input
        className="border-2 border-red-400 p-3"
        type="text"
        onKeyUp={(e) => handleKeyPress(e)}
      />
    </div>
  );
}

export default CapslockTest;

Another way of doing this is by checking whether the pressed key produces a capital or lowercase letter. Here's an example code snippet that demonstrates how to detect Caps Lock:

 import React from "react";
import { KeyboardEvent } from 'react';

function CapslockTest() {
   function checkCapsLock(event: KeyboardEvent): void {
    let capsLockOn: boolean = false;

    // Get the pressed key and check if it's a capital letter
    const key: string = event.key;
    if (key.length === 1 && key >= 'A' && key <= 'Z' && !event.shiftKey) {
      capsLockOn = true;
    }

    // Display a warning message if Caps Lock is on
    if (capsLockOn) {
      alert('Caps Lock is on');
    } else {
      alert('capslock is off');
    }
  }

  function handleKeyPress(event: KeyboardEvent<HTMLInputElement>) {
    checkCapsLock(event);
  }
  return (
    <div className="flex-1 min-h-screen flex items-center justify-center">
      <input
        className="border-2 border-red-400 p-3"
        type="text"
        onKeyUp={(e) => handleKeyPress(e)}
      />
    </div>
  );
}

export default CapslockTest;

This might be a little bit confusing but I'll give a quick explanation of what is going on here;

In this version, the key property is used to get the value of the pressed key as a string. The condition key.length === 1 checks that the pressed key is a single character, and the condition key >= 'A' && key <= 'Z' checks that it's a capital letter. Finally, the !event.shiftKey condition checks that the Shift key is not pressed.

With these steps, you can make the user experience on your website more interactive. Feel free to comment on more ways to actually do capslock detection in Javascript and React.