Question

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

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

Answer 1

您可以使用cols和rows属性设置textarea的大小，并使其在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" ... />为什么要避免使用它？

Answer 2

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

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

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

Answer 3

您可以在文本区域中使用wrap="off"属性以单行显示。

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

Answer 4

使用rows = 1仅显示1行。您可以从此link

获取更多信息

Answer 5

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

无法禁用多线

Answer 6

是的，有可能使用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

Answer 7

使用此纯JS代码，将不允许用户在textarea中输入多行

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

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

Answer 8

以下jQuery代码段强制textarea显示在一行中。

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

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

8 个答案: