Textarea 类似，但只有一行

Posted 2023-05-07

【中文标题】Textarea 类似，但只有一行

【英文标题】：Textarea alike but for only one line

【发布时间】：2018-09-02 16:26:23

【问题描述】：

我喜欢 textarea 元素的一点是它允许自动拼写检查。输入文本元素不会发生这种情况。我需要一个像 textarea 这样的元素，即使用户按下回车，它也只会显示一行并且永远不会转到下一行。我试过 row='1' 但如果用户按下输入内容移动到下一行也没关系。这也可能是一个反应组件。有这样的东西吗？

【参考方案1】：

像这样：

document.querySelector('textarea').addEventListener('keydown', (e) => 
  if (e.keyCode === 13) e.preventDefault();
);

textarea 
  white-space: nowrap;
  overflow:hidden;

<textarea rows="1"></textarea>

【讨论】：

我做了与你的想法相当的 React 并且一切正常！！

我认为overflow:hidden; 应该是overflow-y:hidden;。

输入一些字符后，输入的字符不可见。大约 70 到 90 个字符发生

【参考方案2】：

你的问题标记为 ReactJS

import React from 'react';

class App extends React.Component 

  handleTextArea = (e) =>
    let lineCount = 0;
    if (e.keyCode == 13) 
      lineCount++;
    
    if (lineCount >= 1)  // set here how may lines you want
      e.preventDefault();
      return false;
    
  
  render() 
    return (
        <div>
        <textarea onKeyDown=this.handleTextArea>only one line</textarea>
        </div>
    )
  

export default App