如何在React JS中阻止Chakra-UI输入框触发虚拟键盘？

Chakra-UI的Input组件基于原生HTML的<input>封装，所以可以通过原生属性或样式配置实现点击时不弹出虚拟键盘，以下是几种可行方案：

方案1：利用readonly属性 + 样式覆盖 #

通过readonly阻止键盘弹出，同时用Chakra的样式属性调整输入框外观，保持可点击的交互感：

<Input
  readonly
  _readOnly={{ opacity: 1, cursor: 'text', borderColor: 'gray.300' }}
  onClick={() => {
    // 在这里添加你的点击逻辑，比如打开日期选择器、弹窗等
  }}
/>

• readonly会让输入框无法编辑，自然阻止虚拟键盘弹出
• _readOnly用来覆盖只读状态下的默认样式，让输入框看起来和正常可编辑状态一致

方案2：使用HTML5的inputMode="none"属性 #

这是更直接的原生属性，明确告诉浏览器不要弹出虚拟键盘，输入框仍可响应点击事件：

<Input
  inputMode="none"
  onClick={() => {
    // 你的点击逻辑
  }}
/>

• inputMode="none"是HTML标准属性，支持绝大多数现代浏览器和移动端环境
• 不需要额外调整样式，输入框保持默认可交互外观

方案3：手动阻止默认聚焦行为（适合复杂场景） #

如果需要动态控制键盘弹出状态，可以通过React ref获取原生input元素，在点击时阻止默认行为：

import { useRef } from 'react';
import { Input } from '@chakra-ui/react';

const CustomNonKeyboardInput = () => {
  const inputRef = useRef(null);

  const handleInputClick = (e) => {
    // 阻止默认的聚焦弹出键盘行为
    e.preventDefault();
    // 可选：如果需要保持输入框聚焦状态（比如显示自定义下拉）
    inputRef.current?.focus({ preventScroll: true });
    // 执行你的自定义逻辑
  };

  return (
    <Input
      ref={inputRef}
      onClick={handleInputClick}
    />
  );
};

内容的提问来源于stack exchange，提问作者Alex Junior Pro