是否可以禁用 textarea 的多行选项？答案

【问题标题】：Is it possible to disable textarea's multiline option?是否可以禁用 textarea 的多行选项？
【发布时间】：2012-05-30 17:44:42
【问题描述】：

当然，我可以使用标准的html文本框，但出于某种原因我需要文本区域。

那么，是否可以禁用 textarea 的多行选项？

【问题讨论】：

stackoverflow.com/questions/5424001/…

标签： html textarea

【解决方案1】：

您可以使用cols 和rows 属性设置文本区域的大小，并使其在CSS 中不可调整大小，但您不能阻止用户添加多于一行。即使区域太小，也会出现一个滚动条，让他们想写多少行就写多少行。

如果你真的只需要一行，我建议将 rows 属性设置为 1 并使用 Javascript 检查输入是否只有一行。

在html中：

<textarea name="a"  cols="5" rows="1" ></textarea>

在 CSS 中：

textarea{
    resize: none; 
    #You can use resize: horizontal if you just want to disable vertical resize
}

不过，我还是建议使用 <input type="text" ... /> 为什么要避免使用它？

【讨论】：

这可能不是 OP 的用例，但我在构建基本的丰富单行输入时遇到了这个问题（允许在文本框中设置某些单词或单词组的样式）。为了实现这一点，我用pointer-events:none; 覆盖了一个样式化的div。为了使其与滚动时的输入保持同步（当用户键入超出边缘时），您需要侦听滚动事件。不幸的是，只有一个 textarea 会触发一个（输入拒绝）。所以在这种情况下，必须避免输入。
@NicolaeSurdu 怎么会这样？您链接到的小提琴似乎完全按照我描述的方式工作。至少在 Chrome 和 Edge 中。
我的错。没有看到您提到用户仍然能够在文本区域中创建新行。我和我认为 OP 也在寻找一种解决方案来防止这种情况发生。
@NicolaeSurdu 的解决方案是type="text" :)
@toniedzwiedz 实际上，解决方案是 JS :)

【解决方案2】：

您可以通过在<textarea> 上设置rows="1" 将所有文本保留在一行中，就像其他答案所建议的那样，然后将以下 CSS 应用于文本区域：

resize: none;
white-space: nowrap;
overflow-x: scroll;

此 CSS 将防止单行换行，同时仍通过提供滚动条来导航超出可见区域的任何文本，从而使整行保持可见。

【讨论】：

警告：即使拥有white-space: nowrap 将使其在 1 行上显示所有内容（rows="1" 或其他），它仍然需要用户可能在文本框中输入的所有字符，包括未显示的回车符显示。

【解决方案3】：

您可以在 textarea 中使用wrap="off" 属性以单行显示。

&lt;textarea wrap="off"&gt;&lt;/textarea&gt;

【讨论】：

【解决方案4】：

是的，可以使用input 事件在用户每次输入内容时删除所有换行符。

<textarea oninput="this.value = this.value.replace(/\n/g,'')"></textarea>

或者以更文明的方式：

html

<textarea id="ta"></textarea>

js

document.getElementById('ta').addEventListener('input', function(e){
    this.value = this.value.replace(/\n/g,'')
});

Demo on JSFiddle

【讨论】：

列表中唯一对我有用的解决方案

【解决方案5】：

使用这个纯 JS 代码，它不会允许用户在 textarea 中输入多行

var textArea = document.getElementsByTagName("textarea")[0];//your desired TextArea
textArea.onkeydown = function (e) {
    if (e.keyCode == 13) { e.preventDefault(); }
};

注意：如果用户复制多行文本并将其粘贴到 TextArea 中，此方法将不起作用。

【讨论】：

【解决方案6】：

使用 rows=1 只显示 1 行。你可以从这个link获得更多信息

【讨论】：

testarea 的主要用途是多行数据，如果你想要单行然后使用文本框。

【解决方案7】：

您可以将rows 属性设置为1。

不能禁用多行

【讨论】：

【解决方案8】：

下面的 jQuery sn-p 强制 textarea 显示在一行中。

  $(document).ready(function(){
    $('textarea').each(function(){$(this).attr('rows', 1);});
  });

【讨论】：