Textarea“wrap = hard”不适用于Firefox
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Textarea“wrap = hard”不适用于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标签。
（我还没有尝试过任何其他浏览器）
有人可以告诉我为什么会这样，以及如何确保正确传递换行符，无论浏览器如何。
在Firefox中（至少从3.6以上），为了保留自动换行符，这是你必须要做的......
- 当然，设置
wrap=hard - 不要使用
cols和rows属性 - 必须指定CSS宽度和高度
- 根本不指定CSS溢出（让Firefox确定）
测试了这个确切的场景，它似乎在正确的位置换行。
看起来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)。列宽是某种字体的平均字符宽度。
你为什么不试试
echo '<pre>';
echo "$pastwork";
echo '</pre>';`
？我知道它是一样的，但它可能值得麻烦。
我发现如果我将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
});
以上是关于Textarea“wrap = hard”不适用于Firefox的主要内容，如果未能解决你的问题，请参考以下文章
css - max-height: 100% 不适用于 textarea
带有#id的jQuery load（）不适用于TEXTAREA