jquery - textareaのテキストを一番上に残す方法は？

Question

私はここにアプリケーションを持っています：ここに

アプリケーションでは、次のことを行ってください。

上部のテキスト領域に一部のコンテンツを入力します
ボタンをクリックして、Add Question下の表にコンテンツを追加します。表のテキストエリアのコンテンツがテキストエリアの上部に配置されていることがわかります。
これでファイル入力が表示されます。ファイル入力を使用して画像をアップロードしてください。
アップロードが完了すると、ファイルの名前、非表示の入力、および削除ボタンが下に追加されますが、他の列のコンテンツを含むテキスト領域を見ると、テキストがスペースを下に移動しています。それはトップにとどまりませんでした。

それが私の質問です。この状況で、テキスト入力のテキストをテキスト領域の上部に残しておくにはどうすればよいですか？

以下はメインコードです：

テーブル行に追加された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;
}

score 3 · Accepted Answer

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 */
}

このようにすると、一番右の列のセルにどれだけの情報が追加されても、すべてのセルがほぼ同じ場所で上部に揃えられます。テキストを本当に整列させたい場合は、テキストエリアの周りの余白の間隔も調整する必要があるかもしれませんが、これで少なくとも始めることができます。

score 1 · Accepted Answer

任意の検査ツール (とにかく Chrome または Firefox をお勧めします) を使用して、テキストがテキスト領域の上部にあることを確認できます。添付のスクリーンショット:

ここに画像の説明を入力

問題は、mori57 が言うように、新しいテキストがより多くのスペースを作成していることです。彼の解決策は機能するはずですが、空白の場所にテキストを作成してみませんか? 読み込み後に消える「読み込み中」の画像があるところに、「画像をアップロードしました」というテキストを入れます。私が添付した 3D スクリーンショット、オレンジ色のビットで、私が意味することをより明確に見ることができます。

または、これを行わない場合は、少なくともその html ビットを非表示にすることができます (スタイルをに変更しますdisplay: none;)。

jquery - textareaのテキストを一番上に残す方法は？

2 に答える 2

Related

Reference