具有字符限制的居中 css textarea

Posted 2023-04-18

【中文标题】具有字符限制的居中 css textarea

【英文标题】：centered css textarea with character limit

【发布时间】：2012-09-06 21:52:37

【问题描述】：

我是 *** 的新手，也是 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 正常工作。然后我将致力于从框中提交文本，存储它，并使用它来做很多事情。任何帮助将不胜感激。谢谢。

【问题讨论】：

能否也包含您的 HTML。

包含 HTML。我没有多少。它基本上只有3个DIV。我想在“box”div 上方透明地包含 textarea。基本上，我只是希望用户输入一些内容并点击按钮。 3 个 DIV 正在工作，并且与背景图像一起正确排列。所以除了这个透明文本区域之外，我都准备好了。

【参考方案1】：

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

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

【讨论】：

这确实有点帮助，谢谢。我仍然很困惑如何在我已经设置样式的框顶部创建一个文本区域。除了实际的光标和用户输入的文本之外，我真的很想让 textarea 透明。

我相信我已经回答了最初的问题，但这里是透明效果。 jsfiddle.net/zFcHp/4。如果我的回答有用，您应该投票赞成。如果我已经解决了你提出的问题，你也应该给它一个绿色的复选标记。谢谢。

请注意，包含在 div 中的工作方式与使用 br 标签的示例相同...jsfiddle.net/zFcHp/5