修复注册页面：第三段输入框占位符功能与位置异常问题

问题说明 #

当前注册页面第三段输入区域存在两个问题：

1. 点击输入框时，占位符文本无法像其他输入框一样隐藏；
2. 占位符文本未显示在文本框起始位置，因此前设置的max-width及占位符的居中样式导致。

问题根源及解决思路 #

问题1原因 #

原有JS逻辑通过input.nextElementSibling获取占位符，但第三段输入区域的placeholder元素在input之前，导致无法找到对应元素，无法触发隐藏逻辑。
解决方式：改为在当前输入框的父容器（.input-container）中查找.placeholder类元素，不受DOM顺序影响。

问题2原因 #

第三段的占位符添加了margin: auto和固定宽度，同时输入框设置了mx-auto和max-width，导致占位符偏离输入框起始位置。
解决方式：移除占位符的margin: auto和固定宽度样式，让绝对定位的占位符基于父容器定位，与输入框的内边距对齐。

修改后的代码 #

1. JavaScript 代码 #

document.addEventListener('DOMContentLoaded', function () {
  const inputs = document.querySelectorAll('.form-control');
  inputs.forEach(input => {
    input.addEventListener('focus', () => hideText(input));
    input.addEventListener('blur', () => showText(input));
    showText(input);
  });
});

function hideText(input) {
  // 改为在父容器中查找占位符，不受DOM顺序影响
  const placeholder = input.closest('.input-container').querySelector('.placeholder');
  if (placeholder) {
    placeholder.style.display = 'none';
  }
}

function showText(input) {
  const placeholder = input.closest('.input-container').querySelector('.placeholder');
  if (placeholder && input.value === '') {
    placeholder.style.display = 'block';
  }
}

2. CSS 代码 #

.centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-container {
  position: relative;
  /* 确保容器宽度与输入框一致，避免占位符超出 */
  display: inline-block;
}

.placeholder {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #999;
  /* 防止长占位符文本换行 */
  white-space: nowrap;
}

.form-section {
  margin-bottom: 20px;
}

.form-control {
  border-radius: 10px;
}

3. HTML 第三段修改部分 #

移除占位符的行内样式，修改后如下：

<!-- Third Segment -->
<div class="row form-section">
  <div class="col-md-2 mb-3" style="text-align: right; display: flex; align-items: center;">
    <label for="adresse" style="margin-bottom: 0; margin-right: 10px;">Adresse:</label>
  </div>
  <div class="col-md-4 mb-3" style="text-align: center; margin: auto;">
    <div class="input-container">
      <div class="placeholder">Straßenname und Hausnummer</div>
      <input type="text" class="form-control mx-auto" id="strasse" name="strasse" onfocus="hideText(this)" onblur="showText(this)">
    </div>
  </div>
  <div class="col-md-2 mb-3" style="text-align: center; margin: auto;">
    <div class="input-container">
      <div class="placeholder">PLZ</div>
      <input type="text" class="form-control mx-auto" id="plz" name="plz" pattern="[0-9]*" inputmode="numeric" onfocus="hideText(this)" onblur="showText(this)" style="max-width: 80px;">
    </div>
  </div>
  <div class="col-md-4 mb-3" style="text-align: center; margin: auto;">
    <div class="input-container">
      <div class="placeholder">Ortsname</div>
      <input type="text" class="form-control mx-auto" id="ort" name="ort" onfocus="hideText(this)" onblur="showText(this)" style="max-width: 150px;">
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Testa Maxima