这是我的代码。我提交评论时遇到问题，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’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 提前谢谢
答案 0 :(得分：0)
它真的是你的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表
答案 1 :(得分：0)
第一张图片中textarea上方的输入位于块级别的div中。在第二个图像中，那个文本框，我假设div，不在那里。块级div将浮动的textarea推到第一个图像中的位置。有几种方法可以通过css修复它，但最明显的是确保输入和它包含的div在提交后仍然存在。