28

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

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

4

8 回答 8

23

您可以使用colsandrows属性设置文本区域的大小，并使其在 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" ... />Why do you want to Avoid it？

于 2012-05-24T07:02:44.183 回答
14

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

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

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

于 2016-05-17T19:18:42.603 回答
5

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

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

于 2020-07-06T03:10:46.113 回答
5

是的，每次用户输入内容时，都可以使用inputevent 删除所有换行符。

<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,'')
});

JSFiddle 上的演示

于 2020-10-04T18:24:30.580 回答
2

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

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

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

于 2019-08-03T15:10:23.790 回答
1

使用 rows=1 仅显示 1 行。您可以从此链接获得更多信息

于 2012-05-24T06:49:47.187 回答
1

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

无法禁用多行

于 2012-05-24T06:51:14.613 回答
-2

下面的 jQuery 代码片段强制 textarea 在一行中显示。

  $(document).ready(function(){
    $('textarea').each(function(){$(this).attr('rows', 1);});
  });
于 2015-07-21T13:48:52.030 回答