React：如何检测 Caps Lock 是否打开

React 1年前 75

下面的完整示例向您展示了当您在 React 应用程序的输入字段中键入内容时，如何确定当前是否打开了大写锁定。这在许多情况下都很有用，例如当用户输入密码时，大写锁定可能会导致错误。

例子

演示：

React：如何检测 Caps Lock 是否打开

App.js中的代码：

// KindaCode.com
// src/App.js
import { useState } from 'react';
import './App.css';

function App() {
  const [isCapsLockOn, setIsCapsLockOn] = useState(false);

  // This function is triggered on the keyup event
  const checkCapsLock = (event) => {
    if (event.getModifierState('CapsLock')) {
      setIsCapsLockOn(true);
    } else {
      setIsCapsLockOn(false);
    }
  };

  return (
    <div className='container'>
      <h3>KindaCode.com Example: Detect Caps Lock</h3>
      <p>
        If you focus on the the input field and hit the Caps Lock key, a warning
        will show up
      </p>

      {/* The input field */}
      <input
        onKeyUp={checkCapsLock}
        type='text'
        placeholder='Eenter some text here'
        className='input'
      />

      {/* Show a warning if caps lock is ON */}
      {isCapsLockOn && (
        <p className='caps-lock-warning'>Warning: Caps Lock is ON</p>
      )}
    </div>
  );
}

export default App;

App.css中的代码：

.container {
    margin: 50px 40px;
}

.input {
    width: 400px;
    padding: 10px 20px;
    border: 1px solid #999;
    border-radius: 10px;
}

.caps-lock-warning {
    color: red;
    font-size: 28px;
}