Question

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

因此,能否禁用文本区域多线选项?

Answer 1

您可以使用 cols 和 rows 属性设置文本区域的大小, 使其无法在 CSS 中复制, 但无法阻止用户添加不止一行。即使区域太小, 滚动条也会出现, 并允许他们写入他们想要的行数。

如果您真的需要只获得一行, 我建议将 < code> 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
}

不过,我还是建议使用来避免它?

Answer 2

您可以按 rows=" 1" 设置将所有文本保存在上的单行上,就像其他答案所建议的那样,然后将以下的 CSS 应用到文本区域 :

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

此 CSS 将防止单行包装, 同时通过提供一个滚动条, 浏览任何覆盖可见区域的文字, 使整行保持可见。

Answer 3

是的, 可以使用 < code> input 事件来删除所有新行字符, 每次用户输入某种内容。

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

或者以更文明的方式:

< 加强>html

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

<强>js

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

"https://jsfiddle.net/4qrnv6sz/" rel="noreferrer">Demo on JSFiddle

Answer 4

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

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

Answer 5

使用此纯 JS 代码, 它不允许用户在文本区域中输入多个行

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

NOTE: 如果用户复制多行文本并将其粘贴在文本区域中, 此方法将无效。

Answer 6

使用行=1 仅显示一行。您可以从此 < a href=\\\ \\ \ \ \\ \\ \\ \\ \\ \ \ \\ \\ \ \ \ \ \ \ \ \ \ \\ \ \ \ \ \\ \ \ \ \ \\\\ \ \\ \\ \ \ \\\ \\ \\ \ \ \ \ \ \\\ \ \ \ \ \ \ \ \ \ \ \\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \

Answer 7

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

无法禁用多线

Answer 8

以下jQuery 片段强制将显示为单行的文本区域。

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

友情链接