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

Posted 2023-05-07

【中文标题】是否可以禁用 textarea 的多行选项？

【英文标题】：Is it possible to disable textarea's multiline option?

【发布时间】：2012-05-30 17:44:42

【问题描述】：

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

那么，

【问题讨论】：

***.com/questions/5424001/…

【参考方案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" 属性以单行显示。

<textarea wrap="off"></textarea>

【参考方案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););
  );