首先，对于冗长的解释，我深表歉意。 我知道这类问题已经回答了很多次，我也浏览过其他一些帖子，但没有一种方法适合我。
有些地方我遗漏了一些东西，我无法修复这部分。 如果有人能指出到底出了什么问题，那将很有帮助。
基本上我已经按照此链接开始动态添加和删除文本区域:-
https://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery
但是我已经按照我的要求修改了代码。 我附上了 3 张图片来演示我在做什么
Click on this link to see the attached image this is by Default textarea
On clicking +(plus) button i added new textarea,This is where textarea starts moving
我试过改变位置和溢出，但似乎没有任何效果
好的，我正在尝试修复这部分代码，其中我有一个默认文本区域并且用户可以动态添加和删除，但是每当我尝试添加新文本区域时，所有先前的文本区域位置都向上移动并超出该属性的范围
<td id="ui-selected-xpath">
<div class="input_fields_wrap">
<img class="add_field_button" src='images/new.png' width='16' height='16'/>
<div class="ui-xpathDiv-forTextArea">
<textarea id="xpathGrade" class="ui-xpath" type="text" name="mytext[]">
</div>
</div>
</td>
现在当我动态添加文本区域时，它超出了 td 区域
我的 HTML 代码:-
<body>
<div id='adding-app' title='Add New Xpath'>
<div id='editor-app'></div>
<div align='center'>
<form>
<fieldset>
<div id='tue' title='Add Xpath'>
<div id='editor-xpath'></div>
<div align='center'>
<table>
<tr>
<td>
<label for='app_name0'><b>Xpath Request :
</b></label>
<p id="demo"></p>
</td>
</tr>
<tr>
<td>
<textarea id='Xpath' readonly></textarea>
</td>
<td id="ui-selected-xpath">
<div class="input_fields_wrap">
<img class="add_field_button" src='images/new.png' width='16' height='16'/>
<div class="ui-xpathDiv">
<textarea id="xpathGrade" class="ui-xpath" type="text" name="mytext[]">
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</body>
这是我的 CSS 代码:
#Xpath{
width: 351px;
height: 349px;
}
#ui-selected-xpath{
border: 1px solid black;
}
.add_field_button{
position: relative;
float:left;
bottom:110px;
left:266px;
}
.ui-xpath{
position: relative;
float:left;
bottom:135px;
resize: none;
height: 2em;
width: 20em;
}
.ui-xpathDiv{
margin-bottom: 16px;
background-color: red;
max-width: 100%;
max-height: 100%;
}
#xpathGrade{
margin-bottom: 16px;
resize: none;
height: 2em;
width: 20em;
}
.ui-xpath{
position: relative;
float:left;
bottom:135px;
resize: none;
height: 2em;
width: 20em;
}
我的添加和删除文本区域的 JS 代码
$(".add_field_button").click(function(e){ //on add input button click
isFirstElementFocused =false;
x++; //text box increment
$(".input_fields_wrap").append(
'<div class="ui-xpathDiv" id="xpathDiv_'+x+'"><textarea id="xpathGrade_'+x+'" type="text" class="ui-xpath" name="mytext[]" /><img class="remove_field" src="images/remove.png"/></div>'
);
});
$(".input_fields_wrap").on("click",".remove_field",
function(e){ //user click on remove text
e.preventDefault();
checkDuplicateXpath.remove($(this).prev().val());
x--;
$(this).closest("div").remove();
$(".ui-xpathDiv").each(function () {
x = Number(this.id.substring(this.id.indexOf("_") + 1));
});
});
我正在寻找的是固定动态文本区域，这样无论何时添加任何文本区域，它都不应该移动，并且应该附加在底部
最佳答案
你的 xpathGrade textarea没有被关闭。例如 <textarea id="xpathGrade" class="ui-xpath" type="text" name="mytext[]">应该是 <textarea id="xpathGrade" class="ui-xpath" type="text" name="mytext[]"></textarea> .这可能是导致渲染错误的原因。
您在 jQuery 中创建的文本区域也没有被关闭。
编辑:
尝试将您的 CSS 更改为此，以及 textarea 更改。
<style media="screen">
#Xpath{
width: 351px;
height: 349px;
}
#ui-selected-xpath{
border: 1px solid black;
vertical-align:top;
}
#ui-selected-xpath img, #ui-selected-xpath textarea {
display: inline-block;
vertical-align: middle;
}
.add_field_button{
position: relative;
}
.ui-xpath{
position: relative;
resize: none;
height: 2em;
width: 20em;
}
.ui-xpathDiv-forTextArea{
margin-bottom: 16px;
background-color: red;
max-width: 100%;
max-height: 100%;
}
#xpathGrade{
resize: none;
height: 2em;
width: 20em;
}
.ui-xpath{
position: relative;
resize: none;
height: 2em;
width: 20em;
}
</style>
同时将第一个图像按钮放在 ui-xpathDiv 中.
<div class="ui-xpathDiv">
<textarea id="xpathGrade" class="ui-xpath" type="text" name="mytext[]"></textarea>
<img class="add_field_button" src='images/new.png' width='16' height='16'/>
</div>
关于jquery - 如何在动态添加和删除textarea时避免与其他元素重叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44287371/