jqueryを使ってdivをテキストエリアの下部に付けるには

Question

ウェブページに複数のHTMLテキストエリアボックスを置くことができます。テキストエリアにフォーカスが当てられたら、正確にdivを表示（または作成）したいと思います。フォーカスが去ったら、私はdivを隠す（または破壊したい）。別のテキストエリアにフォーカスが当たったら、同じことが起こりたい。いくつかの詳細は：

1. テキストエリアには、幅と高さ
2. テキストエリアの下側に取り付けられたdiv要素が固定され、不変され、200pxの幅と40ピクセル高のようなものの様々なことができます。上のテキストエリアの高さ/幅に関係なく変更されません。
3. ユーザーはdivと対話する必要はなく、実際にはそうしないでください。それは、 "使用されたxx文字のx"またはそれに類するものを表示します。これは表示専用ですが、divの内容はユーザーのタイプに応じて連続的に変更されます。 （うまくいけば、これはテキストエリアからフォーカスを取り除いてdivを隠すことはありません）
4. 一度に1つの「div-underneath-textarea」しか表示されません。つまり、1つのdivだけが存在する必要があります。それが最も簡単な場合は、オンザフライで作成することができます。
5. テキストエリアがフォーカスを受け取ったときにDivを作成する必要があります。
6. テキストエリアのフォーカスが失われたときにDivを破棄する必要があります。
7. キーを押すたびにdivの内容を変更する必要があります。
8. divはtextaraのすぐ下に正確に固定する必要があります。

jqueryでこれを達成する最も簡単な方法は何ですか？私は何らかの理由で問題がなければ、動的に作成された（そして後で破壊された）divが理想的かもしれないと考えています。

私は主に、フォーカス/ブラー時のダイナミックなdivの作成/破棄、およびそのdivのテキストエリアの下側への固定を助ける必要があります。

ありがとうございます。

Answer 1

insertAfter()を使用して、focusinにテキストエリアの後にdivを挿入することができます。その後、focusoutでそのdivを削除できます。それで、キーが押されるたびにdivの内容を変更しなければならないと言ったときに、あなたが何をしたいのかは分かりません。テキストエリアの内容を表示するには、キーアップ機能を使用してそのテキストなどを表示します。あなたが何が起こりたいのかを指定すれば、私はより良く助けることができます。私が作成した ..

//inserts the div under the textarea 
 
$('textarea').on('focusin', function(){ 
 
    $('<div class="added-div">Added Div</div>').insertAfter(this); 
 
}); 
 
//removes the added div and clears the textarea 
 
$('textarea').on('focusout', function(){ 
 
    $('.added-div').remove(); 
 
    $(this).val(''); 
 
}); 
 
//updates the added div with textarea content 
 
$('textarea').keyup(function() { 
 
    var textareaContent = $(this).val(); 
 
    $('.added-div').html(textareaContent); 
 
});

textarea{ 
 
    display:block; 
 
    margin:10px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea></textarea> 
 
<textarea></textarea> 
 
<textarea></textarea> 
 
<textarea></textarea>

Answer 2

は、私は私ができるのと同じくらい簡単にそれを行うことを試みたことが助けになることができるかどうかを確認：しかし、すべてのあなたは、次のような何かを行うことができます言いましたテンプレートdiv、そしてフォーカスして私はそれぞれのテキストエリアの後にそれを追加するだけです..それからフォーカスイン/アウトではなく、それを隠すだけです。&私の本では高価です。 div。歓声

var templ = $('<div class="under"></div>'); 
 
// show when mouse goes in 
 
$('textarea').on('mouseover', function(el){ 
 
    $(this).focus(); 
 
}); 
 
$('textarea').on('focus', function(el){ 
 
    // show div under that textarea 
 
    if(! $(this).next().hasClass('under')) $(this).after($(templ).clone()); 
 
    $(this).next().show(); 
 
}); 
 
// hide when mouse goes out 
 
$('textarea').on('mouseleave focusout', function(el){ 
 
    $(this).next().hide(); 
 
}); 
 
// do some stuff.. 
 
$('textarea').on('keyup', function(el){ 
 
    $(this).next().text($(this).val().length); 
 
});

.ta{ 
 
    width: 20%; 
 
    height: 50px; 
 
} 
 
.relative{ position: relative; display: inline; } 
 
.under{ 
 
    background-color:red; color: blue; 
 
    width: 100%; 
 
    height: 50px; 
 
    position: absolute; 
 
    top: 30px; left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="relative"><textarea class="ta t1"></textarea></div> 
 
<div class="relative"><textarea class="ta t2"></textarea></div> 
 
<div class="relative"><textarea class="ta t3"></textarea></div> 
 
<div class="relative"><textarea class="ta t4"></textarea></div>