Question

这是我的代码。我提交评论时遇到问题，textarea将失去其位置。我不知道为什么。香港专业教育学院检查其CSS。没运气。

    $(document).ready(function(){
        $("#box-table-a").tablesorter(); 


        var messageArea = $('textarea#message');
        var nameArea=$('#comment-name');
        var submit=$('#submit-comment');

        nameArea.val('Enter your name').css('color', '#666666');
        messageArea.val('Leave your message here').css('color', '#666666');


        messageArea.focus(function (){
            $(this).val('').css('color', '#000000');
            $(this).unbind('click').click(function(){
                return false;
            });
        });

        nameArea.focus(function (){
            $(this).val('').css('color', '#000000');
            $(this).unbind('click').click(function(){
                return false;
            });
        });

        $('input#submit-comment').click(function(){     
            // Store vars
            var message = messageArea.hide().val();
            var cname = nameArea.hide().val();
            // Validation
            if(message.length < 1 || message == "Leave your message here"){
                    submit.fadeOut('fast');
                    messageArea.fadeOut('slow', function(){
                    nameArea.fadeOut('slow');

                    var errorMessage = 'Oops! You haven&#8217;t typed anything. Please have another go...';
                    var error = $('<div id="too-short"><span class="error">' + errorMessage + '</span></div>').insertBefore($(this));
                    error.hide().fadeIn('slow', function(){
                        setTimeout(function(){
                            error.hide();
                            messageArea.fadeIn('slow');
                            nameArea.fadeIn('slow');
                            submit.fadeIn('slow');
                        }, 1000);
                    });
                });

                return false;
            }

            var dataString = 'message='+ message+'name='+ cname;


            // Show loader
            var loader = $('<div id="loader"><img class="load-gif" src="' + loaderImage.src + '" /></div>').insertBefore($(this));

            //alert (dataString);
            $.ajax({
                type: "POST",
                url: "commentconnect.php",
                data: {message:message, name:cname},
                success: function(data) {
                    $('div#loader').find('img.load-gif').remove();
                    $('div#loader').hide().fadeIn('slow');
                    $('span.limit').remove();
                    $('div#append').prepend(data);
                    $('input#submit-comment').unbind('click').click(function(){

                        return false;
                    });
                }
            });  
            return false;
        });
    });

//ive added the appended part of the comment which is in the table

     <table align="left" style="margin-left:30px; width:520px; border:1px solid;">
        <?php

                    while($fetchcom=mysql_fetch_array($comment))
                    {

                    echo"<tr>";
                        echo"<td style='font-size:15px'>";
                        echo $fetchcom['c_name'];
                        echo"</td>";

                        echo"<td align='right' style='font-size:12px; font-style:italic'>";
                        echo $fetchcom['date'];
                        echo"</td>";
                    echo"</tr>";

                    echo"<tr>";
                        echo"<td colspan='2' style='padding:10px 10px 5px 10px; font-size:14px; color:gray; font-style:italic;'>";
                        echo $fetchcom['Comment'];
                        echo"</td>";
                    echo"</tr>";
                    }
                   ?>
                   <div id='append' style="margin-left:-20px; position:relative; width:300px;"></div>
</table>
<div id="submission">
                    <form name="comment-submission">
                    <div style="position:relative;  float:left; left:30px; top:5px;" >Add Comment</div>
                     <div style="position:relative; left:30px; top:3px;"><input type="text" id="comment-name" /></div>
                     <textarea id="message" name="message" ></textarea>             

                   <div style="position:relative; top:-85px; height:70px; width:100px; right:-458px;"><input type="button" id="submit-comment" value="Submit"  /> </div>

 </form>
<div class="clear"></div>
</div>

//继续css希望这会有所帮助

div#submission {
    position:relative;
    height:50px;
    width:520px;

}
div#submission textarea#message {
    float:left;
    width:400px;
    height:46px;
    padding:5px 25px 5px 5px;
    border:1px solid #666;
    font-family: Tahoma, sans-serif;
    font-size:14px;
    margin-left:30px;

}

#comment-name{
float:left;
    width:400px;
    height:20x;
    padding:5px 25px 5px 5px;
    border:1px solid #666;
    font-family: Tahoma, sans-serif;
    font-size:14px;
    margin-bottom:5px;
}

div#submission input#submit-comment{
cursor:pointer; 
height:30px;
width:70px;
margin-top:54px;
margin-left:5px;
color:#050;
  font: bold 84% 'trebuchet ms',helvetica,sans-serif;
  background-color:#fed;
  border: 1px solid;
  border-color: #696 #363 #363 #696;
  filter:progid:DXImageTransform.Microsoft.Gradient
  (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');

}

我认为问题出在前置（数据）部分。必须有一些东西可以添加以恢复textarea的位置，但我不知道是什么以及如何。我是jquery和ajax的新手。

顺便说一句，我有截图，向您展示我提到的textarea。在提交评论之前 - http://i.stack.imgur.com/67eVU.png并在提交评论后发送截图 - http://i.stack.imgur.com/zFSXC.png 提前谢谢

Answer 1

它真的是你的CSS故障，你需要定义一个区域（div），其高度/宽度等尺寸与输入形式相匹配，然后它不应该以你现在看到的方式变形。很难告诉你更多，因为我在这里看不到任何合适的CSS。

做类似的事情：

<div style="position: relative">
  <div style="position: absolute; left: 50px;">Add comment</div>
  <div style="position: absolute; right: 20px;">Blah blah</div>

  ...

</div>

将主要容器保存为“相对”项目可让您将内部项目与其相关联。目前你有一个position:relative;混乱，这就是问题所在。

在简单的HTML页面上练习一些CSS定位，以使表单看起来正确，然后集成到您的应用程序中。

我只使用内联css进行快速参考，你应该在现实世界中使用外部CSS表

Answer 2

第一张图片中textarea上方的输入位于块级别的div中。在第二个图像中，那个文本框，我假设div，不在那里。块级div将浮动的textarea推到第一个图像中的位置。有几种方法可以通过css修复它，但最明显的是确保输入和它包含的div在提交后仍然存在。

Jquery / ajax问题显示

2 个答案: