Explore various locations and conceal different divs by clicking

Question

Explore various locations and conceal different divs by clicking

Can someone help me figure out how to hide the placeholders when the focus changes in a form? Here is the code snippet that illustrates my problem.

Your assistance is greatly appreciated, João

var inputs = Array.prototype.slice.call(document.querySelectorAll(".inpt"));
var list = ["YOUR NAME", "YOUR E-MAIL ADDRESS", "YOUR PHONE NUMBER"];
var upholder = document.getElementsByClassName("upholder");
var lol = document.getElementById("row-normal-3");

for (i = 0; i < upholder.length; i++) {
    upholder[i].classList.add("hide");
}

inputs.forEach(function slideUp(ipt, index) {
    ipt.addEventListener("click", function slideUpTwo() {
        upholder[index].classList.remove("hide");
        upholder[index].classList.add("show");
        upholder[index].innerHTML = list[index];
    })
})

.show {
  display:flex;
}

.hide {
  display:none;
}

<div class="le-form">
                    <form method="POST">
                       <div class="le-input">
                           <div class="upholder"></div>
                           <input class="inpt" type="text" name="name" placeholder="Your name">
                       </div>
                       <div class="le-input">
                           <div class="upholder"></div>
                           <input class="inpt" type="email" name="_replyto" placeholder="Your e-mail address">
                       </div>
                       <div class="le-input">
                           <div class="upholder"></div>
                           <input class="inpt" type="text" name="phone" placeholder="Your phone number">
                       </div>
                        <input type="submit" value="Send" class="form-btn">
                    </form>
                </div>

javascript html css

Answer 1

Answer №1

To ensure a smooth transition when applying class changes to a specific input field, it is recommended to first hide all input fields before making the changes.

var inputs = Array.prototype.slice.call(document.querySelectorAll(".inpt"));
var list = ["YOUR NAME", "YOUR E-MAIL ADDRESS", "YOUR PHONE NUMBER"];
var upholder = document.getElementsByClassName("upholder");
var lol = document.getElementById("row-normal-3");

for (i = 0; i < upholder.length; i++) {
  upholder[i].classList.add("hide");
}

inputs.forEach(function slideUp(ipt, index) {
  ipt.addEventListener("click", function slideUpTwo() {
    hideAllLabels();

    upholder[index].classList.remove("hide");
    upholder[index].classList.add("show");
    upholder[index].innerHTML = list[index];
  })
})

var hideAllLabels = function() {
  for (i = 0; i < upholder.length; i++) {
    upholder[i].classList.remove("show");
    upholder[i].classList.add("hide");
  }
}

.show {
  display: flex;
}

.hide {
  display: none;
}

<div class="le-form">
  <form method="POST">
    <div class="le-input">
      <div class="upholder"></div>
      <input class="inpt" type="text" name="name" placeholder="Your name">
    </div>
    <div class="le-input">
      <div class="upholder"></div>
      <input class="inpt" type="email" name="_replyto" placeholder="Your e-mail address">
    </div>
    <div class="le-input">
      <div class="upholder"></div>
      <input class="inpt" type="text" name="phone" placeholder="Your phone number">
    </div>
    <input type="submit" value="Send" class="form-btn">
  </form>
</div>

Answer 2

To ensure a smooth transition when applying class changes to a specific input field, it is recommended to first hide all input fields before making the changes.

var inputs = Array.prototype.slice.call(document.querySelectorAll(".inpt"));
var list = ["YOUR NAME", "YOUR E-MAIL ADDRESS", "YOUR PHONE NUMBER"];
var upholder = document.getElementsByClassName("upholder");
var lol = document.getElementById("row-normal-3");

for (i = 0; i < upholder.length; i++) {
  upholder[i].classList.add("hide");
}

inputs.forEach(function slideUp(ipt, index) {
  ipt.addEventListener("click", function slideUpTwo() {
    hideAllLabels();

    upholder[index].classList.remove("hide");
    upholder[index].classList.add("show");
    upholder[index].innerHTML = list[index];
  })
})

var hideAllLabels = function() {
  for (i = 0; i < upholder.length; i++) {
    upholder[i].classList.remove("show");
    upholder[i].classList.add("hide");
  }
}

.show {
  display: flex;
}

.hide {
  display: none;
}

<div class="le-form">
  <form method="POST">
    <div class="le-input">
      <div class="upholder"></div>
      <input class="inpt" type="text" name="name" placeholder="Your name">
    </div>
    <div class="le-input">
      <div class="upholder"></div>
      <input class="inpt" type="email" name="_replyto" placeholder="Your e-mail address">
    </div>
    <div class="le-input">
      <div class="upholder"></div>
      <input class="inpt" type="text" name="phone" placeholder="Your phone number">
    </div>
    <input type="submit" value="Send" class="form-btn">
  </form>
</div>

Answer 3

Answer №2

It seems like you are interested in:

An event that is triggered when the element loses focus
An event that not only triggers when the user clicks on the field, but also when they press tab to enter it.

I have modified your code to utilize focus instead of click to set the tooltip and blur to remove it. The functionality works smoothly.

Explore the variety of events HTML offers: https://developer.mozilla.org/en-US/docs/Web/Events

var inputs = Array.prototype.slice.call(document.querySelectorAll(".inpt"));
var list = ["YOUR NAME", "YOUR E-MAIL ADDRESS", "YOUR PHONE NUMBER"];
var upholder = document.getElementsByClassName("upholder");
var lol = document.getElementById("row-normal-3");

for (i = 0; i < upholder.length; i++) {
    upholder[i].classList.add("hide");
}

inputs.forEach(function slideUp(ipt, index) {
    ipt.addEventListener("blur", function () {
        upholder[index].classList.add("hide");
        upholder[index].classList.remove("show");
    })

    ipt.addEventListener("focus", function slideUpTwo() {
        upholder[index].classList.remove("hide");
        upholder[index].classList.add("show");
        upholder[index].innerHTML = list[index];
    })
})

.show {
  display:flex;
}

.hide {
  display:none;
}

<div class="le-form">
                    <form method="POST">
                       <div class="le-input">
                           <div class="upholder"></div>
                           <input class="inpt" type="text" name="name" placeholder="Your name">
                       </div>
                       <div class="le-input">
                           <div class="upholder"></div>
                           <input class="inpt" type="email" name="_replyto" placeholder="Your e-mail address">
                       </div>
                       <div class="le-input">
                           <div class="upholder"></div>
                           <input class="inpt" type="text" name="phone" placeholder="Your phone number">
                       </div>
                        <input type="submit" value="Send" class="form-btn">
                    </form>
                </div>

Answer 4

It seems like you are interested in:

An event that is triggered when the element loses focus
An event that not only triggers when the user clicks on the field, but also when they press tab to enter it.

I have modified your code to utilize focus instead of click to set the tooltip and blur to remove it. The functionality works smoothly.

Explore the variety of events HTML offers: https://developer.mozilla.org/en-US/docs/Web/Events

var inputs = Array.prototype.slice.call(document.querySelectorAll(".inpt"));
var list = ["YOUR NAME", "YOUR E-MAIL ADDRESS", "YOUR PHONE NUMBER"];
var upholder = document.getElementsByClassName("upholder");
var lol = document.getElementById("row-normal-3");

for (i = 0; i < upholder.length; i++) {
    upholder[i].classList.add("hide");
}

inputs.forEach(function slideUp(ipt, index) {
    ipt.addEventListener("blur", function () {
        upholder[index].classList.add("hide");
        upholder[index].classList.remove("show");
    })

    ipt.addEventListener("focus", function slideUpTwo() {
        upholder[index].classList.remove("hide");
        upholder[index].classList.add("show");
        upholder[index].innerHTML = list[index];
    })
})

.show {
  display:flex;
}

.hide {
  display:none;
}

<div class="le-form">
                    <form method="POST">
                       <div class="le-input">
                           <div class="upholder"></div>
                           <input class="inpt" type="text" name="name" placeholder="Your name">
                       </div>
                       <div class="le-input">
                           <div class="upholder"></div>
                           <input class="inpt" type="email" name="_replyto" placeholder="Your e-mail address">
                       </div>
                       <div class="le-input">
                           <div class="upholder"></div>
                           <input class="inpt" type="text" name="phone" placeholder="Your phone number">
                       </div>
                        <input type="submit" value="Send" class="form-btn">
                    </form>
                </div>

Answer 5

Answer №3

Conceal all the placeholder texts before revealing the specific focus element's placeholder text. To achieve this, simply include the forloop within the click function.

var inputs = Array.prototype.slice.call(document.querySelectorAll(".inpt"));
var list = ["YOUR NAME", "YOUR E-MAIL ADDRESS", "YOUR PHONE NUMBER"];
var upholder = document.getElementsByClassName("upholder");
var lol = document.getElementById("row-normal-3");

for (i = 0; i < upholder.length; i++) {
  upholder[i].classList.add("hide");
}

inputs.forEach(function slideUp(ipt, index) {
  ipt.addEventListener("click", function slideUpTwo() {

    for (i = 0; i < upholder.length; i++) { //hide all upholder
      upholder[i].classList.add("hide");
    }
    upholder[index].classList.remove("hide");
    upholder[index].classList.add("show");
    upholder[index].innerHTML = list[index];
  })
})

.show {
  display: flex;
}

.hide {
  display: none;
}

<div class="le-form">
  <form method="POST">
    <div class="le-input">
      <div class="upholder"></div>
      <input class="inpt" type="text" name="name" placeholder="Your name">
    </div>
    <div class="le-input">
      <div class="upholder"></div>
      <input class="inpt" type="email" name="_replyto" placeholder="Your e-mail address">
    </div>
    <div class="le-input">
      <div class="upholder"></div>
      <input class="inpt" type="text" name="phone" placeholder="Your phone number">
    </div>
    <input type="submit" value="Send" class="form-btn">
  </form>
</div>

Answer 6

Conceal all the placeholder texts before revealing the specific focus element's placeholder text. To achieve this, simply include the forloop within the click function.

var inputs = Array.prototype.slice.call(document.querySelectorAll(".inpt"));
var list = ["YOUR NAME", "YOUR E-MAIL ADDRESS", "YOUR PHONE NUMBER"];
var upholder = document.getElementsByClassName("upholder");
var lol = document.getElementById("row-normal-3");

for (i = 0; i < upholder.length; i++) {
  upholder[i].classList.add("hide");
}

inputs.forEach(function slideUp(ipt, index) {
  ipt.addEventListener("click", function slideUpTwo() {

    for (i = 0; i < upholder.length; i++) { //hide all upholder
      upholder[i].classList.add("hide");
    }
    upholder[index].classList.remove("hide");
    upholder[index].classList.add("show");
    upholder[index].innerHTML = list[index];
  })
})

.show {
  display: flex;
}

.hide {
  display: none;
}

<div class="le-form">
  <form method="POST">
    <div class="le-input">
      <div class="upholder"></div>
      <input class="inpt" type="text" name="name" placeholder="Your name">
    </div>
    <div class="le-input">
      <div class="upholder"></div>
      <input class="inpt" type="email" name="_replyto" placeholder="Your e-mail address">
    </div>
    <div class="le-input">
      <div class="upholder"></div>
      <input class="inpt" type="text" name="phone" placeholder="Your phone number">
    </div>
    <input type="submit" value="Send" class="form-btn">
  </form>
</div>

Answer 7

Answer №4

To ensure a clean interface, consider hiding all existing placeholders prior to displaying the relevant one in relation to the selected input. The implementation of a function such as "hideAllUpHolders" can streamline this process. Additionally, having a separate function dedicated to hiding upholders when focus shifts to an external element can further enhance the user experience, if deemed necessary.

Answer 8

To ensure a clean interface, consider hiding all existing placeholders prior to displaying the relevant one in relation to the selected input. The implementation of a function such as "hideAllUpHolders" can streamline this process. Additionally, having a separate function dedicated to hiding upholders when focus shifts to an external element can further enhance the user experience, if deemed necessary.

Answer 9

Answer №5

Here is an alternative approach utilizing Array.Map().

If we look at the code snippet for upholder, the change can be made from:

var upholder = document.getElementsByClassName("upholder");

to (Converting HTML Node Collection to Array):

var upholder = [].slice.call(document.getElementsByClassName("upholder"));

In regard to the click event, the modification is made from:

upholder[index].classList.remove("hide");
upholder[index].classList.add("show");
upholder[index].innerHTML = list[index];

to:

upholder.map(function (el, i) {index === i ? 
        (el.classList.add("show"), el.innerHTML=list[index]) : 
        (el.classList.remove("show"), el.innerHTML="")});

Comprehensive solution:

window.onload = function () {
var inputs = Array.prototype.slice.call(document.querySelectorAll(".inpt"));
var list = ["YOUR NAME", "YOUR E-MAIL ADDRESS", "YOUR PHONE NUMBER"];
var lol = document.getElementById("row-normal-3");
var upholder = [].slice.call(document.getElementsByClassName("upholder"));

inputs.forEach(function slideUp(ipt, index) {
ipt.addEventListener("click", function slideUpTwo() {
upholder.map(function (el, i) {index === i ? 
                            (el.classList.add("show"), el.innerHTML = list[index]) :
    (el.classList.remove("show"), el.innerHTML = "")
});
})
})
}

<style type="text/css">
.show {
display: flex;
}

.hide {
display: none;
}
</style>

<div class="le-form">
<form method="POST">
<div class="le-input">
<div class="upholder"></div>
<input class="inpt" type="text" name="name" placeholder="Your name">
</div>
<div class="le-input">
<div class="upholder"></div>
<input class="inpt" type="email" name="_replyto" placeholder="Your e-mail address">
</div>
<div class="le-input">
<div class="upholder"></div>
<input class="inpt" type="text" name="phone" placeholder="Your phone number">
</div>
<input type="submit" value="Send" class="form-btn">
</form>
</div>

Answer 10

Here is an alternative approach utilizing Array.Map().

If we look at the code snippet for upholder, the change can be made from:

var upholder = document.getElementsByClassName("upholder");

to (Converting HTML Node Collection to Array):

var upholder = [].slice.call(document.getElementsByClassName("upholder"));

In regard to the click event, the modification is made from:

upholder[index].classList.remove("hide");
upholder[index].classList.add("show");
upholder[index].innerHTML = list[index];

to:

upholder.map(function (el, i) {index === i ? 
        (el.classList.add("show"), el.innerHTML=list[index]) : 
        (el.classList.remove("show"), el.innerHTML="")});

Comprehensive solution:

window.onload = function () {
var inputs = Array.prototype.slice.call(document.querySelectorAll(".inpt"));
var list = ["YOUR NAME", "YOUR E-MAIL ADDRESS", "YOUR PHONE NUMBER"];
var lol = document.getElementById("row-normal-3");
var upholder = [].slice.call(document.getElementsByClassName("upholder"));

inputs.forEach(function slideUp(ipt, index) {
ipt.addEventListener("click", function slideUpTwo() {
upholder.map(function (el, i) {index === i ? 
                            (el.classList.add("show"), el.innerHTML = list[index]) :
    (el.classList.remove("show"), el.innerHTML = "")
});
})
})
}

<style type="text/css">
.show {
display: flex;
}

.hide {
display: none;
}
</style>

<div class="le-form">
<form method="POST">
<div class="le-input">
<div class="upholder"></div>
<input class="inpt" type="text" name="name" placeholder="Your name">
</div>
<div class="le-input">
<div class="upholder"></div>
<input class="inpt" type="email" name="_replyto" placeholder="Your e-mail address">
</div>
<div class="le-input">
<div class="upholder"></div>
<input class="inpt" type="text" name="phone" placeholder="Your phone number">
</div>
<input type="submit" value="Send" class="form-btn">
</form>
</div>

Explore various locations and conceal different divs by clicking

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

issues with padding in the main content section

View content from a text file on a webpage

Ways to implement a filter pipe on a property within an array of objects with an unspecified value

Guide on setting the dropdown's selected index through JavaScript

NextJs application displaying empty homepage and preventing redirection

Prevent the user from selecting an option if the value is already present

Encountering issues with jQuery AJAX POST request

Using Angular.js to Make a $http.get Request from a Different Controller

Encountering a problem with GraphQL API fetching in Next.js: receiving the error message "React functionality 'useContext' is not supported in this environment."

Classify the JavaScript objects according to the array of object lists

Troubleshooting issues with static serving in Express.js

Update the dropdown field selection to the color #333 with the help of javascript

HTML5 for Bulk Video Upload

Creating a custom navigation bar that elegantly fades away with a smooth animation as you scroll down the page is a must-have

Validation of PO Box Addresses Using Regular Expressions

Displaying JSON with AngularJS HTTP Get request won't work in my project

Creating the document.ready function in Angular2 with JQuery

Troubleshooting VueJS's Dilemma with Quotation Marks

Problem with onblur and onchange events not being triggered in input tag

What steps can be taken to remove a server-side validation error message once the user has inputted the correct value?