如何使用jquery將div附加到textarea的底部

我可以在網頁上有多個html textarea框，當任何textarea接收焦點時，我想顯示（或創建）一個div。當焦點離開時，我想隱藏（或破壞）div。當一個不同的textarea獲得焦點時，我想要發生同樣的事情。的一些細節：如何使用jquery將div附加到textarea的底部

的文字區域可以是各種寬度和高度
附連到文本區域的下側上的格將被固定不變的，像200像素寬和40像素高的。無論上面的textarea的高度/寬度如何，它都不會改變。
用戶不需要與div交互，實際上不應該。它將顯示「使用xx個字符的x」或類似的東西。它僅用於顯示，但div的內容將隨用戶輸入而不斷更改。（希望這不會從文本區域移除焦點並隱藏div）
只有一個「div-underneath-textarea」會一次顯示。這意味着只需要1個div即使存在。如果這是最簡單的，它可以在飛行中創建。
div應該在textarea獲得焦點時創建。
當textarea失去焦點時Div應該被銷燬。
每次按下某個鍵時div的內容都必須更改。
div需要精確地錨定在textara的下面。

什麼是最簡單的方式來實現這與jQuery的？我在想，一個動態創建的（後來被破壞的）div可能是理想的，除非它由於某種原因有問題。

我主要需要幫助創建/銷燬焦點/模糊時的動態div，以及將該div錨定到textarea底部。

在此先感謝。

來源

2017-08-17 HerrimanCoder

而是這一切的文字，你可以創建一個演示，並用1-2句話解釋了這個問題。 – Dekel

對不起Dekel，我會看看我是否可以把這個演示放在一起。 – HerrimanCoder

您可以非常簡單地使用insertAfter()在focusin textarea後插入div。然後在focusout你可以刪除該div。然後我不確定當你說每次按下鍵時div的內容必須改變時你想要發生什麼。如果你想要它顯示textarea的內容，你可以使用一個鍵入功能，並顯示該文本或其他東西。如果你指定你想要發生的更好，我可以更好地幫忙。但說了這麼多，你可以做類似如下：

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

來源

2017-08-18 00:39:15

很好，感謝您的詳細解答。 – HerrimanCoder

我試圖做的那麼簡單，因爲我可以看..如果能有所幫助.. 我創建模板div，然後在焦點上，我只是將它追加到每個textarea後..然後在焦點進/出只是隱藏它，不會破壞&重新創建，這是在我的書中昂貴，我還包括簡單的文本操作在該目標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>

來源

2017-08-18 00:54:28

謝謝你的深思熟慮的答案。 – HerrimanCoder

如何使用jquery將div附加到textarea的底部

回答

相關問題