Textarea“wrap = hard”不适用于Firefox

问题描述 投票:2回答:4

我有以下代码:

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

(我还没有尝试过任何其他浏览器)

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

php html textarea word-wrap
4个回答
1
投票

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

  • 当然,设置wrap=hard
  • 不要使用colsrows属性
  • 必须指定CSS宽度和高度
  • 根本不指定CSS溢出(让Firefox确定)

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


1
投票

看起来Mozilla Firefox使用cols属性来打破文本而不是显示textarea的宽度。在XHTML中,需要colsrows属性。您应该尝试确定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)。列宽是某种字体的平均字符宽度。


0
投票

你为什么不试试

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

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


0
投票

我发现如果我将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
                    });
© www.soinside.com 2019 - 2024. All rights reserved.