如何停靠html输入元素？
如何停靠html输入元素？
提问于 2021-07-06 13:40:09
有一些带有如下标签的输入：
function hide(target) {
document.getElementById(target).style.display = 'none';
}<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label id="label_lname" for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone"><br><br>
<!-- other inputs here... -->
<a href="#" onclick="hide('lname');hide('label_lname');">Hide Last Name</a>
如果我隐藏fname (使用JavaScript)，手机应该移动到fname所在的位置。如果phone被隐藏，下一个元素应该移动到它的位置，依此类推。是否有某种dock top属性？
Playground:当点击Hide Last Name时，Last Name元素应该被隐藏，phone应该被移动到它的位置。https://jsfiddle.net/Smolo/ukh8x5p7/
其行为应该类似于C# DockStyle.Top:如果一个按钮排列在另一个按钮的下方，并且其中一个按钮不可见，则下面的所有按钮都会向上移动。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-07-06 13:58:19
问题出在<br>标签上。如果您为包含input, label and br标签的根元素设置了display:none，它将正常工作。
function hide(target) {
document.getElementById(target).style.display = 'none';
}<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<div id="lname">
<label id="label_lname" for="lname">Last name:</label>
<input type="text" name="lname">
<br><br>
</div>
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone"><br><br>
<a href="#" onclick="hide('lname');hide('label_lname');">Hide Last Name</a>
Stack Overflow用户
发布于 2021-07-06 14:02:15
它不能移动的原因是您不需要<br><br>
我将委托并使用CSS来分隔字段
此外，当您不需要在字段旁边的其他位置放置标注时，还可以将标注环绕在字段周围以节省工作量
const toggle = e => {
const tgt = e.target;
if (tgt.classList.contains("toggleField")) {
e.preventDefault(); // cancel click
document.getElementById(tgt.dataset.id).classList.toggle("hide")
}
};
document.getElementById("toggleDiv").addEventListener("click", toggle)label {
padding-bottom: 2vh;
display: block
}
.hide {
display: none;
}<label id="fnameLabel">First name: <input type="text" id="fname" name="fname"></label>
<label id="lnameLabel">Last name: <input type="text" id="lname" name="lname"></label>
<label id="phoneLabel">Phone: <input type="text" id="phone" name="phone"></label>
<div id="toggleDiv">
<a href="#" class="toggleField" data-id="fnameLabel">Toggle First Name</a>
<a href="#" class="toggleField" data-id="lnameLabel">Toggle Last Name</a>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68265113
复制相关文章
相似问题
腾讯云开发者
