我在这里有一个应用程序：这里
在应用程序中，请执行以下操作：
- 在顶部的文本区域中输入一些内容
- 单击
Add Question按钮将内容附加到下表中。可以看到表格中textarea中的内容放在了textarea的顶部。 - 现在您将看到文件输入，请使用文件输入上传图像。
- 现在，当上传完成时，它会在下面附加文件的名称、隐藏的输入和删除按钮，但是在另一列中查看带有您的内容的文本区域，文本已向下移动了一个空格。它并没有保持领先。
这是我的问题，在这种情况下，我如何才能将文本输入中的文本保持在文本区域的顶部？
下面是主要代码：
附加到表格行的文本区域和文件输入：
var count = 0;
var gQuestionIndex = 0;
function insertQuestion(form) {
var questionarea=(form.questionText.length)
? form.questionText[0]
: form.questionText;
var $tbody = $('#qandatbl_onthefly > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'>");
var $question = $("<td width='13%' class='question'></td>");
var $image = $("<td width='17%' class='image'></td>");
var $questionType = '';
gQuestionIndex++;
$('.questionTextArea').each( function() {
var $this = $(this);
var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name',$this.attr('name')+"[]")
.attr('value',$this.val());
$question.append($questionText);
});
var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" +
"<p class='imagemsg'></p></label>" +
"Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>" +
"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" +
"<p class='listImage'></p>" +
"<iframe class='upload_target_image' name='upload_target_image' src='/' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>");
$image.append($fileImage);
$tr.append($question);
$tr.append($image);
$tbody.append($tr);
count++;
$(form).find('.numberOfQuestions').val(qnum);
form.questionText.value = "";
$('.questionTextArea').val('');
setWidth();
}
setWidth()如果表格单元格的高度和宽度发生变化，它确保 textarea 保持填充表格单元格的代码：
function setWidth() {
$(".textAreaQuestion").each(function(){
var questionCellWidth = $(this).closest(".question").width();
var questionCellHeight = $(this).closest(".question").height();
$(this).css({
"width": (questionCellWidth - 6) + "px",
"height": (questionCellHeight) + "px"
});
});
}
停止上传功能，它附加文件名、删除按钮和隐藏输入：
function stopImageUpload(success, imageID, imagefilename){
var result = '';
imagecounter++;
if (success == 1){
result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span>';
$('.listImage').eq(window.lastUploadImageIndex).append('<input type="hidden" name="imgid[]" id="'+imageID+'" value="' + imageID + '" />');
$('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" data-imageID="'+imageID+'" data-image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>');
}
$(sourceImageForm).find('.imagemsg').html(result);
$(sourceImageForm).find('.imagemsg').css('visibility','visible');
$(sourceImageForm).find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");
$(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');
return true;
}
最后下面是textarea的css：
.textAreaQuestion{
width:100%;
resize:none;
height:100%;
border:0;
padding:0;
font-size:100%;
display: block;
overflow:auto;
margin:0;
vertical-align:top;
}
