Question

我有以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org 
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="RLJ RLJ" />

    <title>Untitled 2</title>
</head>

<body>
    <form action=SCRIPT.php method=POST>
        <textarea name="pastwork" id="pastwork" rows="6" wrap="hard" style="border: 1px solid  
#808080; width:85px; padding: 5px;"></textarea>
        <input type="submit" value = "Submit"/>
    </form>
</body>
</html>

其中SCRIPT.php如下：

<?php
$pastwork = $_POST['pastwork'];

echo "<pre>". $pastwork."</pre>";
echo "<br />";
echo nl2br($pastwork);

?>

我遇到的问题是在Firefox中没有正确传递换行符。当我在textarea中输入以下内容时（B表示导致光标跳转到下一行的字符，N表示导致该单词跳转到下一行的字符）：

ddddddddddBdd fff
ggg ggg ggNgg sss

即。 textarea看起来像这样：

+------------+
| dddddddddd |
| Bdd fff    |
| ggg ggg    |
| ggNgg sss  |
+------------+

Internet Explorer将其回复为：

DDDDDDDDD
  Bdd fff
  ggg ggg
  ggNgg sss

这是正确的，换行符恰好在textarea中。

然而，Firefox回应它：

ddddddddddn fff
ggg ggg ggNgg sss

我是使用nl2br()还是pre标记。

（我还没有尝试过任何其他浏览器）

有人可以告诉我为什么会这样，以及如何确保正确传递换行符，无论浏览器如何。

Answer 1

在Firefox中（至少从3.6以上），为了保留自动换行符，这是你必须要做的......

当然，请设置wrap=hard
请勿使用cols和rows属性
必须指定CSS宽度和高度
根本不指定CSS溢出（让Firefox确定）

测试了这个确切的场景，它似乎在正确的位置换行。

Answer 2

似乎Mozilla Firefox使用cols属性来打破文本而不是显示textarea的宽度。在XHTML中，cols和rows属性是必需的。您应该尝试确定cols属性的值应该是什么，但这很难做到，因为'col'的宽度取决于使用的字体。您可以使用JavaScript来确定字体长度。

在How to get the actual rendered font when it's not defined in CSS?上，询问如何做到这一点。

function getStyle(element, property) {
    return window.getComputedStyle(element, null).getPropertyValue(property);
}

你可以得到一个元素的字体（即使它没有通过CSS定义！）并计算该元素内部文本的宽度。因此，您可以获得在一行上绘制的最大文本长度。然后，您必须使用JavaScript手动设置cols属性：textarea.setAttribute("cols", numberofcols)。列宽是某种字体的平均字符宽度。

Answer 3

你为什么不试试

echo '<pre>';
echo "$pastwork";
echo '</pre>';`

？我知道它是一样的，但它可能值得麻烦。

Answer 4

我发现只要我将cols设置为一个非常高的值就行了。

与cols=200类似，因为它实际上小于它，它将正确地执行换行符。

我用jquery创建我的textarea所以它看起来像这样......

var textArea = $("<textarea/>", {
                        'name': 'marko',
                        'class': 'form-control',
                        'id': 'new-text-box',
                        'placeholder': 'Type your message...',
                        'autofocus': true,
                        'cols': 200,
                        'rows': 4
                    });

Answer 5

来自：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

包装指示控件如何包装文本。可能的值为：

难点：浏览器会自动插入换行符（CR + LF），以使每行的宽度不超过控件的宽度；还必须指定cols属性以使其生效。

软件：浏览器确保该值中的所有换行符均由CR + LF对组成，但不会插入任何其他换行符。

要保留（自动创建的）换行而不添加更多内容，请使用wrap =“ hard”发表，然后将内容读取到wrap =“ soft”

Textarea“wrap = hard”不适用于Firefox

5 个答案: