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

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

是的，每次用户输入内容时，可以使用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,'')
});

JSFiddle 上的演示

Answer 3

你可以通过设置在保持一行的所有文本rows="1"上<textarea>,像其他答案建议,然后将下面的CSS到文本区:

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

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

Answer 4

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