Javascript form alanı stili değiştirerek gibi görünüyor

0 Cevap php

Olması gerekenden daha birkaç piksel daha düşük class="checkMax3" görüntüler Aşağıdaki metin ile formu. Chrome, küçük harf "p" ve "q" gibi harfler alanın alt altında uzanır. IE 8, bu aynı harf alt kısmı görüntülenmez.

Eğer doğru hatırlıyorsam ben alanına aşağıdaki Javascript uygulanmış sonra, bu sorun başladı.

"Q" ve "p" gibi harfler alana tamamen sığabilecek kadar bunu yapmak nasıl herhangi bir fikir? Alan harf içeren yeterince yüksek görünüyor, ama metin alanında çok düşük yaklaşık 5 piksel olarak görünür.

Teşekkür peşin,

John

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;
    }   

0 Cevap