Javascript 似乎正在改变表单字段样式答案

【问题标题】：Javascript seems to be altering form field styleJavascript 似乎正在改变表单字段样式
【发布时间】：2010-08-17 05:53:32
【问题描述】：

下面带有class="checkMax3" 的表单显示的文本比应有的低几个像素。在 Chrome 中，小写“p”和“q”之类的字母会延伸到字段底部下方。在 IE 8 中，这些相同字母的底部不显示。

如果我没记错的话，这个问题是在我将下面的 Javascript 应用到该字段之后开始的。

知道如何使“q”和“p”之类的字母完全适合该字段吗？该字段似乎足够高以包含字母，但该字段中的文本似乎太低了大约 5 个像素。

提前致谢，

约翰

javascript：

<script language="javascript" type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready( function () {
    setMaxLength();     
    $("input.checkMax3").bind("click mouseover keyup change", function(){checkMaxLength(this.id); } )
});
function setMaxLength() {
    $("input.checkMax3").each(function(i){
        intMax = $(this).attr("maxlength");
        $(this).after("<div class='commchar2'><span id='"+this.id+"Counter'>"+intMax+"</span> characters remaining</div>");
        });
    }
function checkMaxLength(strID){
        intCount = $("#"+strID).val().length;
        intMax = $("#"+strID).attr("maxlength");
        strID = "#"+strID+"Counter";
        $(strID).text(parseInt(intMax) - parseInt(intCount));
        if (intCount < (intMax * .8)) {$(strID).css("color", "#006600"); } //good
        if (intCount > (intMax * .8)) { $(strID).css("color", "#FF9933"); } //warning at 80%
        if (intCount > (intMax)) { $(strID).text(0).css("color", "#990000"); } //over
    }
</script>

PHP/HTML：

echo '<form action="http://www...com/.../submit2a.php" method="post"> 
    <input type="hidden" value="'.$_SESSION['loginid'].'" name="uid">  

    <div class="submissiontitle"><label for="title">Story Title:</label></div> 
    <div class="submissionfield"><input class="checkMax3" name="title" type="title" id="title" maxlength="80"></div>  

    <div class="urltitle"><label for="url">Link:</label></div> 
    <div class="urlfield"><input name="url" type="text" id="url" maxlength="500"></div>

    <div class="submissionbutton"><input name="submit" type="submit" value="Submit"></div> 
</form>
';

CSS：

.submissionfield
    {
    position:absolute;
    width:550px;
    left:30px;
    top:230px;
    text-align: left;
    vertical-align:text-top;
    margin-bottom:10px;
    padding:2px;
    font-family: "Times New Roman", Times, serif;
    font-size: 22px;
    line-height: 30px;
    color:#000000;
    }

【问题讨论】：

约翰，如果这解决了您的问题，您可能需要考虑选择一个答案。

标签： php javascript html css

【解决方案1】：

您的字体大小太大或输入的高度和行高不够大。使用高度和行高（使它们始终匹配）和字体大小，您将能够得到它。

编辑：

我看到了你的问题。具有高度、字体大小和行高样式的 .submissionfield 类不是输入。那个类在一个div上。对 .checkMax3 类应用类似的样式，它应该看起来不错。

【讨论】：