禁锢的输入框：打破 Firefox 的限制，让复制重新自由

前端

2023-12-26 04:19:49

对于开发人员来说，在不同情况下禁用输入框是一个常见的挑战。然而，Firefox 浏览器为我们带来了独特的障碍：禁用输入框的所有交互事件，包括无法复制字段。这在使用流行的 React 框架和 Antd 库时尤其令人沮丧。

为了解决这个难题，需要深入了解 Firefox 的行为和 Antd 的组件体系。

Firefox 的古怪行为

禁用输入框时，Firefox 会阻止所有交互事件，包括复制。这与其他浏览器不同，在其他浏览器中复制功能不受禁用影响。

Antd 的封装谜题

在 React 中，我们经常将 Antd 的 Input 组件封装在自己的组件中，以便统一样式和逻辑。然而，这种封装给我们带来了一个额外的挑战。

在封装的组件中，我们通常会覆盖 Antd 的样式和行为。但是，当 Firefox 禁用输入框时，我们无法通过覆盖样式来解决问题，因为 Firefox 阻止的是交互事件本身。

破除禁锢

要打破 Firefox 的禁锢，我们需要找到一种方法来重新启用复制事件。经过一番探索，我们找到了一个巧妙的解决方案：使用 JavaScript 监听键盘事件。

我们可以在封装的组件中添加一个事件监听器，监听 keydown 事件。当用户按下 Ctrl+C 组合键时，我们手动触发 copy 事件，绕过 Firefox 的限制。

import React, { useEffect } from 'react';

const MyInput = (props) => {
  useEffect(() => {
    const input = document.querySelector('input');

    input.addEventListener('keydown', (event) => {
      if (event.ctrlKey && event.key === 'c') {
        input.dispatchEvent(new Event('copy'));
      }
    });
  }, []);

  return <input {...props} />;
};

export default MyInput;