当前位置：首页 > React

react实现手机键盘

2026-01-27 01:18:50React

React 实现手机键盘的方法

在 React 中实现手机键盘可以通过自定义组件或使用第三方库来完成。以下是几种常见的方法：

自定义数字键盘组件

创建一个自定义的数字键盘组件，适用于输入密码、验证码等场景。

import React, { useState } from 'react';

const NumberKeyboard = ({ onKeyPress }) => {
  const keys = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

  return (
    <div className="keyboard">
      {keys.map(key => (
        <button key={key} onClick={() => onKeyPress(key)}>
          {key}
        </button>
      ))}
      <button onClick={() => onKeyPress('delete')}>删除</button>
    </div>
  );
};

// 使用示例
const App = () => {
  const [input, setInput] = useState('');

  const handleKeyPress = (key) => {
    if (key === 'delete') {
      setInput(input.slice(0, -1));
    } else {
      setInput(input + key);
    }
  };

  return (
    <div>
      <input value={input} readOnly />
      <NumberKeyboard onKeyPress={handleKeyPress} />
    </div>
  );
};

使用第三方库

对于更复杂的键盘需求，可以使用专门的 React 键盘库：

react-simple-keyboard：功能强大的虚拟键盘库

npm install react-simple-keyboard

import React, { useState } from 'react';
import Keyboard from 'react-simple-keyboard';
import 'react-simple-keyboard/build/css/index.css';

const App = () => {
  const [input, setInput] = useState('');

  const onChange = (input) => {
    setInput(input);
  };

  return (
    <div>
      <input value={input} readOnly />
      <Keyboard onChange={onChange} />
    </div>
  );
};

react-touch-keyboard：专为触摸设备设计的键盘
```
npm install react-touch-keyboard
```

移动端输入优化

针对移动端设备，可以结合 HTML5 输入类型：

<input type="tel" pattern="[0-9]*" inputmode="numeric" />

这种方法会触发移动设备的原生数字键盘，提供更好的用户体验。

样式定制

为键盘添加 CSS 样式，使其看起来更像手机键盘：

.keyboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
}

.keyboard button {
  padding: 15px;
  font-size: 18px;
  border: 1px solid #ccc;
  background: #f8f8f8;
  border-radius: 5px;
}