点击不同的区域并隐藏div

我正尝试在输入框上方设置一些窗体。事情是 - 一旦焦点转移到另一个领域，我怎么能隐藏起来？点击不同的区域并隐藏div

该代码片段将帮助您了解我的困难。

谢谢你在前进，若昂

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>

来源

2017-09-14 João Araújo

是什么问题？ –

你是什么意思“隐藏upholders”..你的意思是当你第二次隐藏“你的名字”这样的文字吗？并在第3次时隐藏“您的电子邮件地址”。 – MMRahman

在将类更改应用于特定类之前，您可以先隐藏所有类。

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>

来源

2017-09-14 10:01:18 Nope

隐藏之前所有的维护者，以显示特定的焦点元素upholder.so只需添加forloop点击功能里面

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>

来源

2017-09-14 09:56:29 prasanth

您可以在显示当前相对于所选输入之前隐藏所有持股人。你可以创建一个像“hideAllUpHolders”这样的函数。如果您需要在将焦点赋予外部元素（仅在需要时）时隐藏所有上举者，则可以使用单独的函数。

来源

2017-09-14 10:00:41 SkullFlame

我想你主要是寻找

触发如果元素失去焦点
，做不仅触发一个事件的事件，当用户点击该领域，但他也按tab进入它。

我已经重写代码中使用focus而不是click设置工具提示和blur将其删除。工作很顺利。

这里的HTML在商店为你的事件列表：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>

来源

2017-09-14 10:02:43 SimonSimCity

使用Array.Map（）另一种解决方案。

对于upholder，改由从：

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

到（HTML转换节点集合到阵列）：

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

：

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

对于click事件，变发到：

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

完整的解决方案：

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

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

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

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

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

来源

2017-09-14 12:27:00

点击不同的区域并隐藏div

回答

相关问题