问如何停靠html输入元素？
EN

Stack Overflow用户

提问于 2021-07-06 05:40:09

回答 2查看 43关注 0票数 0

有一些带有如下标签的输入：

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:如果一个按钮排列在另一个按钮的下方，并且其中一个按钮不可见，则下面的所有按钮都会向上移动。

html

9.9元起，最快1天搭建自有直播

提供高并发、低延迟、易接入、极速高清的音视频直播服务，适用于直播电商/在线教育/音视频互动等多种场景

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-07-06 05: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>

票数 1

Stack Overflow用户

发布于 2021-07-06 06: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>