如何让textarea中的文本保持在顶部？

Question

我在这里有一个应用程序：HERE

在申请中，请执行以下操作：

1. 在顶部的文本区域中输入一些内容
2. 单击Add Question 按钮将内容附加到下表中。可以看到表格中textarea中的内容放在了textarea的顶部。
3. 现在您将看到文件输入，请使用文件输入上传图片。
4. 现在，当上传完成时，它会在下方附加文件名、隐藏输入和删除按钮，但请查看 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() 代码确保在表格单元格的高度和宽度发生变化时，文本区域仍然填充表格单元格：

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

Answer 1

尝试添加到您的 CSS：

td.question {
    vertical-align:top;
}

问题是您的右侧列创建了更多垂直空间，并且您的单元格设置为正常状态，这会在单元格中心开始垂直对齐的文本。

更好，甚至，应该是这样的：

td {
    vertical-align:top;
    padding: 1em .5em; /* or something to this effect, 
                          to normalize the spacing of 
                          data from the cell-sides */
}

这样，无论向最右侧的列单元格添加多少信息，所有单元格都会在大约相同的位置开始对齐到它们的顶部。如果您想真正对齐文本，您可能还需要调整 textarea 周围的一些边距间距，但这至少可以帮助您入门。

Answer 2

您可以使用任何检查工具（无论如何推荐 Chrome 或 Firefox）看到文本位于文本区域的顶部。附上截图：

正如 mori57 所说，问题在于新文本创造了更多空间。他的解决方案应该有效，但你为什么不在现在有空白的地方创建文本呢？哪里有加载后消失的“加载中”图片，把“上传图片”的文字放在那里。您可以在我附上的 3D 屏幕截图中更清楚地看到我的意思，橙色位。

或者，如果你不这样做，你至少可以隐藏那个 html 位（将样式更改为display: none;）。