Fatal编程技术网
  • php/
  • Php Textarea"；包裹=硬的“；不适用于Firefox

Php Textarea"；包裹=硬的“；不适用于Firefox

php html

Php Textarea"；包裹=硬的“；不适用于Firefox,php,html,textarea,word-wrap,Php,Html,Textarea,Word Wrap,我有以下代码： <!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=

我有以下代码：

<!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>
Internet Explorer将其呼应为：

ddd
Bdd fff
ggg ggg
ggNgg sss

这是正确的，换行符正好位于文本区域中

然而，Firefox对此的回应是：

dddd n fff
ggg ggg ggNgg sss

我是否使用
nl2br（）
或
pre
标记

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

有人能告诉我为什么会这样，以及如何确保断线被正确地传递，而不考虑浏览器。

为什么不试试

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

echo'；
回音“$pastwork”；
回声'`
?？我知道这是一样的，但可能值得麻烦。

在Firefox中（至少从3.6+开始），为了保留自动换行符，以下是您必须做的

  • 当然，设置
    wrap=hard
  • 不要使用
    cols
    和
    rows
    属性
  • 必须指定CSS宽度和高度
  • 完全不要指定CSS溢出（由Firefox确定）
测试了这个精确的场景，它似乎在正确的位置断开了线。

Mozilla Firefox似乎使用
cols
属性来断开文本，而不是显示文本区域的宽度。在XHTML中，需要
cols
和
rows
属性。您应该尝试确定
cols
属性的值应该是多少，但这很难做到，因为“col”的宽度取决于使用的字体。您可以使用JavaScript确定字体长度

关于如何做到这一点的问题

您可以获取元素的字体（即使它不是通过CSS定义的！）并计算该元素中文本的宽度。因此，您可以在单行上绘制最大文本长度。然后必须使用JavaScript手动设置
cols
属性：
textarea.setAttribute（“cols”，numberofcols）
。列宽是某一字体的平均字符宽度。

我发现，如果我只是将cols设置为一个非常高的值，它就会起作用

比如
cols=200
，因为它实际上小于这个值，所以它会正确地进行换行

我正在用jquery创建我的文本区域，所以看起来像这样

var textArea=$（“”{
'name'：'marko'，
“类”：“窗体控件”，
“id”：“新建文本框”，
“占位符”：“键入您的消息…”，
“自动对焦”：正确，
“科尔斯”：200，
“行”：4
});
来自：

包裹 指示控件包装文本的方式。可能的值为：

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

soft:浏览器确保值中的所有换行符由CR+LF对组成，但不插入任何其他换行符

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

XHTML中需要
cols
和
行
属性。 
+------------+
| dddddddddd |
| Bdd fff    |
| ggg ggg    |
| ggNgg sss  |
+------------+

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

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

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