textarea的“包装=硬”不工作的Firefox

我有以下代码：textarea的“包装=硬”不工作的Firefox

<!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标签。

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

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

来源

2011-03-18 RLJ

你为什么不尝试

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

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

来源

2011-04-06 09:44:40 magicianiam

在Firefox（从3.6 +至少），以便自动换行符保存，这里是你必须做的......

当然，设置wrap=hard
不要使用cols和rows属性
必须指定CSS宽度和高度
都不要指定CSS溢出（让火狐确定它）

测试了这种确切的情况，它似乎在正确的位置换行。

来源

2011-07-03 19:33:46 mrF

的'cols'和'rows'属性是必需的XHTML。 – 2011-09-16 10:59:57

看起来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)。列宽是特定字体的平均字符宽度。

来源

2011-09-16 10:58:48

我发现它会工作，如果我只是设置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 
        });

来源

2015-01-27 07:26:13 teewuane

textarea的“包装=硬”不工作的Firefox

回答

相关问题