修复注册页面

问题描述 投票：0回答：1

我目前正在将几个旧项目重新用于一个新项目，但我不记得过去是如何成功实施它们的。

问题出在第三部分，它没有按预期运行。单击时，它的行为应该像其他一样，使占位符文本消失。此外，占位符文本不位于文本框的开头，因为我之前已在其他地方定义了最大宽度。这可能是问题，但我似乎找不到解决方法。

看一下我当前的代码片段：

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) {
  const placeholder = input.nextElementSibling;
  if (placeholder) {
    placeholder.style.display = 'none';
  }
}

function showText(input) {
  const placeholder = input.nextElementSibling;
  if (placeholder && input.value === '') {
    placeholder.style.display = 'block';
  }
}
.centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-container {
  position: relative;
}

.placeholder {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #999;
}

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

.form-control {
  border-radius: 10px;
}
<!DOCTYPE html>
<html lang="de">
<head>
  <title>Sign up</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

  <div class="container">
    <h2 class="text-center">Sign up</h2>
    <form id="Sign up">
      <!-- First Segment -->
      <div class="row form-section">
        <div class="col-md-6 mb-3" style=" text-align: center; margin: auto;">
          <div class="input-container">
            <i class="fas fa-building" style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 16px;"></i>
            <input type="text" class="form-control mx-auto" id="firma" name="firma" onfocus="hideText(this)" onblur="showText(this)">
            <div class="placeholder">Firmenname</div>
          </div>
        </div>
        <div class="col-md-6 mb-3" style=" text-align: center; margin: auto;">
          <div class="input-container">
            <i class="fas fa-user" style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 16px;"></i>
            <input type="text" class="form-control mx-auto" id="name" name="name" onfocus="hideText(this)" onblur="showText(this)">
            <div class="placeholder">Name</div>
          </div>
        </div>
      </div>

      <!-- Second Segment -->
      <div class="row form-section">
        <div class="col-md-6 mb-3" style=" text-align: center; margin: auto;">
          <div class="input-container">
            <i class="fas fa-phone-alt" style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 16px;"></i>
            <input type="text" class="form-control mx-auto" id="telefon" name="telefon" pattern="[0-9]*" inputmode="numeric" onfocus="hideText(this)" onblur="showText(this)">
            <div class="placeholder">Telefonnummer</div>
          </div>
        </div>
        <div class="col-md-6 mb-3" style=" text-align: center; margin: auto;">
          <div class="input-container">
            <i class="fas fa-envelope" style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 16px;"></i>
            <input type="email" class="form-control mx-auto" id="email" name="email" onfocus="hideText(this)" onblur="showText(this)">
            <div class="placeholder">Email-Adresse</div>
          </div>
        </div>
      </div>

      <!-- 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" style="width: 80px; margin: auto;">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" style="width: 80px; margin: auto;">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" style="width: 150px; margin: auto;">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>
    </form>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="scripts.js"></script>
</body>
</html>

javascript html css styles
1个回答
0
投票

在 JS 中，您可以使用 

input.nextElementSibling
获取占位符元素。在前两节中，占位符元素是在输入元素之后定义的（nextElementSibling 然后指向正确的占位符元素）。但是，最后一节中的顺序是相反的。交换占位符和输入元素的顺序可以解决该问题。

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) { const placeholder = input.nextElementSibling; if (placeholder) { placeholder.style.display = 'none'; } } function showText(input) { const placeholder = input.nextElementSibling; if (placeholder && input.value === '') { placeholder.style.display = 'block'; } }
.centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-container {
  position: relative;
}

.placeholder {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #999;
}

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

.form-control {
  border-radius: 10px;
}
<!DOCTYPE html>
<html lang="de">
<head>
  <title>Sign up</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

  <div class="container">
    <h2 class="text-center">Sign up</h2>
    <form id="Sign up">
      <!-- First Segment -->
      <div class="row form-section">
        <div class="col-md-6 mb-3" style=" text-align: center; margin: auto;">
          <div class="input-container">
            <i class="fas fa-building" style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 16px;"></i>
            <input type="text" class="form-control mx-auto" id="firma" name="firma" onfocus="hideText(this)" onblur="showText(this)">
            <div class="placeholder">Firmenname</div>
          </div>
        </div>
        <div class="col-md-6 mb-3" style=" text-align: center; margin: auto;">
          <div class="input-container">
            <i class="fas fa-user" style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 16px;"></i>
            <input type="text" class="form-control mx-auto" id="name" name="name" onfocus="hideText(this)" onblur="showText(this)">
            <div class="placeholder">Name</div>
          </div>
        </div>
      </div>

      <!-- Second Segment -->
      <div class="row form-section">
        <div class="col-md-6 mb-3" style=" text-align: center; margin: auto;">
          <div class="input-container">
            <i class="fas fa-phone-alt" style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 16px;"></i>
            <input type="text" class="form-control mx-auto" id="telefon" name="telefon" pattern="[0-9]*" inputmode="numeric" onfocus="hideText(this)" onblur="showText(this)">
            <div class="placeholder">Telefonnummer</div>
          </div>
        </div>
        <div class="col-md-6 mb-3" style=" text-align: center; margin: auto;">
          <div class="input-container">
            <i class="fas fa-envelope" style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 16px;"></i>
            <input type="email" class="form-control mx-auto" id="email" name="email" onfocus="hideText(this)" onblur="showText(this)">
            <div class="placeholder">Email-Adresse</div>
          </div>
        </div>
      </div>

      <!-- 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">
            <input type="text" class="form-control mx-auto" id="strasse" name="strasse" onfocus="hideText(this)" onblur="showText(this)">
            <div class="placeholder">Straßenname und Hausnummer</div>
          </div>
        </div>
        <div class="col-md-2 mb-3" style="text-align: center; margin: auto;">
          <div class="input-container">
            <input type="text" class="form-control mx-auto" id="plz" name="plz" pattern="[0-9]*" inputmode="numeric" onfocus="hideText(this)" onblur="showText(this)">
            <div class="placeholder">PLZ</div>
          </div>
        </div>
        <div class="col-md-4 mb-3" style="text-align: center; margin: auto;">
          <div class="input-container">
            <input type="text" class="form-control mx-auto" id="ort" name="ort" onfocus="hideText(this)" onblur="showText(this)">

            <div class="placeholder">Ortsname</div>
          </div>
        </div>
      </div>
    </form>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="scripts.js"></script>
</body>
</html>



    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.