Home Click on different area and hide divs
Reply: 5

Click on different area and hide divs

João Araújo
1#
João Araújo Published in 2017-09-14 09:54:35Z

I am trying to set up a form with some upholders above the inputs. The thing is - how can I hide the upholders once the focus changes to another field?

The code snippet will help you understand my difficulty.

Thank you in advance, 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>

Fran
2#
Fran Reply to 2017-09-14 10:01:18Z

You could hide all of them first before applying the class changes to the specific one.

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>

prasanth
3#
prasanth Reply to 2017-09-14 10:06:15Z

Hide all the upholders before to show the particular focus element upholder.so Simply add the forloop inside 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>

SkullFlame
4#
SkullFlame Reply to 2017-09-14 10:00:41Z

You can hide all the upholders before showing the current relative to the selected input. You can create a function like "hideAllUpHolders". A separate function can be useful in case you need to hide all the upholders when the focus is given to an external element (only if required).

SimonSimCity
5#
SimonSimCity Reply to 2017-09-14 10:02:43Z

I think you're mainly looking for

  • an event that triggers if the element looses the focus
  • an event that does not only trigger when the user clicks on the field but also when he presses tab to get into it.

I've rewritten your code to use focus instead of click to set the tooltip and blur to remove it. Works quite smooth.

Here's a list of the events HTML has in store for you: 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>

Phani Kumar M
6#
Phani Kumar M Reply to 2017-09-14 12:27:00Z

Another solution using Array.Map().

For upholder, change made from:

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

to (Convert HTML Node Collection to Array):

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

For click event, change 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="")});

Full 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>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.307024 second(s) , Gzip On .

© 2016 Powered by cudou.com design MATCHINFO