Question

我是stackoverflow的新手，也是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中的每个元素，我想知道如何添加textarea，以便它只是一个位于居中框内的光标，限制为300个字符。

目前我只想在textarea工作的情况下正确排列所有内容。然后我将处理从框中提交文本，存储它，并使用它来做一堆事情。任何帮助将非常感谢。谢谢。

Answer 1

喜欢这个？ http://jsfiddle.net/zFcHp/3/ - 我将它限制在10而不是300，因为300对测试真的很烦人:)。只需更改maxlength属性即可。

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

以字符限制为中心的css textarea

1 个答案: