html textarea注入换行符答案

【问题标题】：html textarea injecting line breakshtml textarea注入换行符
【发布时间】：2012-10-23 07:39:57
【问题描述】：

我遇到了一个奇怪的问题。

我有一个 html 文本区域，列设置为 84，如下所示：

<textarea id="caseNote_note0" class="txtArea" name="caseNote_note" style="line-height: 1.1em; height: 5em;" wrap="hard" rows="10" cols="84" tabindex="7">blah blah blah</textarea>

txtArea 类定义为：

.txtArea {
            font-family:arial,sans-serif;
            font-size:1.0em;
            width:99%;
            rows:10;
            overflow:hidden;
            border:none;
            font-family:arial,sans-serif;
            margin: 0px 3px 0px 3px;
        }

文本区域几乎覆盖了整个屏幕。

当用户输入数据时，数据全部出现在文本区域中。

但是，当您提交表单时，文本看起来像是在保存时注入了换行符。

即

保存前：

------------------------------------------ -----------------------------------

呜呜呜呜呜呜呜呜呜呜呜

呜呜呜呜呜呜呜呜呜呜呜呜

------------------------------------------ -----------------------------------

保存后： ---------------------------------------------- --------------------------------

哈哈哈哈哈哈哈哈哈

------------------------------------------ -----------------------------------

如果我将 cols 更改为大于 84（例如 150），则换行符会稍后出现（即在换行符之前显示更多文本）。

文本也被保存在数据库表中，带有这些明显的神秘换行符。

解决方法是将cols 设置为非常高的值（例如 500），然后我想我不会遇到这个问题....但我宁愿知道为什么这首先发生了。

感谢任何帮助！

干杯

贾勒特

【问题讨论】：

如果将宽度设置为 99%，为什么要将列设置为 84？
@TheZ 不是我的代码，我被要求修复它：S
好吧，cols 所做的就是设置宽度以容纳那么多字符。宽度 99% 声明会覆盖它并使宽度扩大。
啊...不知道为什么他们将 cols 设置为 84 然后... :\ 感谢您的信息:)

标签： html css textarea

【解决方案1】：

删除wrap 属性。不需要。

【讨论】：

啊，它做到了 - 不知道他们为什么设置包装，但你去吧。当stackoverflow允许我时，我会接受你的回答。谢谢！

【解决方案2】：

您的问题是由 HTML 中的 wrap="hard" 属性引起的。您可以将其更改为wrap="soft" 以在屏幕上换行，但不将它们包含在提交的数据中。或者，您可以将其更改为 wrap="off" 以完全关闭换行 - 然后 textarea 将包含一个水平滚动条。

Here 的一页详细描述了这一点（这一页来自 Microsoft），但是在网上搜索 textarea wrap 会得到更多。

【讨论】：