具有字符限制的居中 css textarea

Question

我是 * 的新手，也是 web 开发的新手。我相信我要做的第一部分应该很容易，但我很难弄清楚。

第一种样式显然以我的背景图像为中心，并且看起来效果很好。我接下来要做的是向页面添加 3 个元素。 1. 一个图形，2. 一个固定大小的文本区域，将输入的字符数限制为 300 个字符，以及 3. 一个提交按钮。

我希望所有这些元素都居中。 textarea应该直接居中，图形应该对齐到文本区域的左边缘并在其上方10px，提交按钮应向右对齐并在其下方10px。

这是我所拥有的：

html { 

        background: url(field1.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;  

    }

#box {

    position: absolute;
    background-image:url(textarea.png);
    height: 250px;
    width: 550px;
    border-radius: 5px;
    margin: -125px 0 0 -275px;
    top: 50%;
    left: 50%;

}


#button {

    position: absolute;
    background-image:url(button.png);
    height: 55px;
    width: 151px;
    top: 260px;
    left: 399px;
    border-radius: 5px;
}

#graphic {

    position: absolute;
    background-image:url(graphic.png);
    height: 58px;
    width: 184px;
    top: -328px;
    left: -399px;
}

<div id="box"></div>
<div id="button"></div>
<div id="graphic"></div>

我有 3 个 DIV，一个用于我的 HTML 中的每个元素，我想知道如何添加文本区域，以便它只是中心框中的一个光标，限制为 300 个字符。

目前，我只想让所有内容都与 textarea 正常工作。然后我将致力于从框中提交文本，存储它，并使用它来做很多事情。任何帮助将不胜感激。谢谢。

Answer 1

像这样？ http://jsfiddle.net/zFcHp/3/ - 我将其限制为 10 而不是 300，因为 300 真的很难测试 :)。只需更改 maxlength 属性即可。

另外请注意，您仍然需要检查从客户端返回的字符串的长度，因为任何使用 firebug 的人或一百种其他工具中的任何一种都可以取消您在客户端的限制并向您发送他们喜欢的任何内容.他们甚至可以下载 Firefox 的代码，并对其进行修改以违反他们想要的任何 Web 标准规则，然后重新编译......永远不要相信客户端会强制执行任何事情！