每次按下添加體驗按鈕以添加另一個文本框時,如何使按鈕保持在文本框底部?
<div class="form-group">
<p>
<h6>Work Experiece</h6>
</p>
<textarea class="form-control" id="form-control-10"rows="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc arcu, dignissim sit amet sollicitudin iaculis, vehicula id urna. Sed luctus urna nunc. Donec fermentum, magna sit amet rutrum pretium, turpis dolor molestie diam, ut lacinia diam risus eleifend sapien. Curabitur ac nibh nulla. Maecenas nec augue placerat, viverra tellus non, pulvinar risus.</textarea>
<div class="col-md-4" id=field_div>
<input type="button" class="ticker-btn1 add-exp" value="Add Experience" onclick="add_field();">
</div>
function add_field() {
var total_text = document.getElementsByClassName("form-control");
total_text = total_text.length 1;
document.getElementById("field_div").innerHTML = document.getElementById("field_div").innerHTML
"<textarea class='form-control add-exp add-textbox' rows='5' id='form-control-" total_text "'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc arcu, dignissim sit amet sollicitudin iaculis, vehicula id urna. Sed luctus urna nunc. Donec fermentum, magna sit amet rutrum pretium, turpis dolor molestie diam, ut lacinia diam risus eleifend sapien. Curabitur ac nibh nulla. Maecenas nec augue placerat, viverra tellus non, pulvinar risus.</textarea>";
}
uj5u.com熱心網友回復:
在現有文本區域上創建一個新的 div 部分,并在新的 div 中添加新的文本區域
這是解決方案
function add_field() {
var total_text = document.getElementsByClassName("form-control");
total_text = total_text.length 1;
document.getElementById("text_area_section").innerHTML =
"<textarea class='form-control add-exp add-textbox' rows='5' id='form-control-" total_text "'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc arcu, dignissim sit amet sollicitudin iaculis, vehicula id urna. Sed luctus urna nunc. Donec fermentum, magna sit amet rutrum pretium, turpis dolor molestie diam, ut lacinia diam risus eleifend sapien. Curabitur ac nibh nulla. Maecenas nec augue placerat, viverra tellus non, pulvinar risus.</textarea>";
}
<div class="form-group">
<p>
<h6>Work Experiece</h6>
</p>
<div id="text_area_section">
<textarea class="form-control" id="form-control-10"rows="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc arcu, dignissim sit amet sollicitudin iaculis, vehicula id urna. Sed luctus urna nunc. Donec fermentum, magna sit amet rutrum pretium, turpis dolor molestie diam, ut lacinia diam risus eleifend sapien. Curabitur ac nibh nulla. Maecenas nec augue placerat, viverra tellus non, pulvinar risus.</textarea>
</div>
<div class="col-md-4" id=field_div>
<input type="button" class="ticker-btn1 add-exp" value="Add Experience" onclick="add_field();"/>
</div>
</div>
注意:- 由于 CSS 不可用,因此未在此解決方案中應用。修改你的 CSS 以獲得完美的視圖
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/359483.html
標籤:javascript html
