Sunday

Fixing Sign up page

4:08 AM css, html, javascript No comments

Issue

I am currently repurposing several older projects for a new one, but I don't have a complete recollection of how I implemented them successfully in the past.

The issue lies in the third segment, which is not functioning as intended. When clicked, it should behave like the others, making the placeholder text disappear. Furthermore, the placeholder text is not positioned at the beginning of the textbox because I have previously defined a maximum width elsewhere. This might the problem but I cannot seem to find a workaround.

Take a peek at a slice of my current code:

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>

Solution

In JS, you get the placeholder element with input.nextElementSibling. In the first two sections, the placeholder element is defined after the input element (nextElementSibling then points to the correct placeholder element). However, the order in the last section is reversed. Switching the order of the placeholder and the input element fixes the issue.

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>

Answered By - Fatorice

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Sunday

Fixing Sign up page

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels