需求：支持拼写检查的单行类textarea元素（含React组件）

完全懂你的需求——既要textarea自带的拼写检查能力，又要像input那样只能单行输入，哪怕按回车也不换行对吧？这里有几个可行的方案，不管是原生HTML还是React组件都能搞定：

原生HTML实现 #

你可以基于textarea改造，用一点JS和CSS把它变成“单行输入框”：

1. 基础结构

<textarea rows="1" id="singleLineTextarea" placeholder="输入内容..."></textarea>

2. CSS样式（让它视觉上和单行input一致）

#singleLineTextarea {
  resize: none; /* 禁止拖动改变大小 */
  overflow: hidden; /* 隐藏溢出内容，确保单行展示 */
  height: 2.2rem; /* 匹配常规input的高度 */
  line-height: 1.5; /* 让文字垂直居中 */
  padding: 0.3rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

3. JavaScript阻止回车换行

const textarea = document.getElementById('singleLineTextarea');
textarea.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault(); // 拦截默认的换行行为
    // 这里还可以按需加逻辑，比如按回车时触发表单提交
  }
});

这样既保留了textarea的拼写检查功能，又实现了单行输入的效果。

React组件实现 #

如果是在React项目中，可以封装一个可复用的组件：

import { useState } from 'react';

const SingleLineTextarea = ({ placeholder, onSubmit }) => {
  const [value, setValue] = useState('');

  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      onSubmit?.(value); // 按需触发回车后的回调，比如提交内容
    }
  };

  return (
    <textarea
      rows="1"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onKeyDown={handleKeyDown}
      placeholder={placeholder}
      style={{
        resize: 'none',
        overflow: 'hidden',
        height: '2.2rem',
        lineHeight: '1.5',
        padding: '0.3rem 0.5rem',
        border: '1px solid #ccc',
        borderRadius: '4px',
        width: '100%'
      }}
    />
  );
};

// 使用示例
// <SingleLineTextarea placeholder="输入内容..." onSubmit={(val) => console.log('提交内容：', val)} />

另外补充个小细节：有些浏览器里其实input[type="text"]也支持拼写检查，你可以试试给input加上spellcheck="true"属性，说不定能直接满足需求？不过如果确实textarea的拼写检查表现更符合你的预期，上面的方案就完全适用。

内容的提问来源于stack exchange，提问作者Jose Cabrera Zuniga