別の領域をクリックしてdivを表示しない

入力の上にいくつかのホルダーがあるフォームを設定しようとしています。問題は、フォーカスが別のフィールドに変更されたら、どのように私はホルダーを隠すことができるのですか？別の領域をクリックしてdivを表示しない

このコードスニペットは、自分の難しさを理解するのに役立ちます。

は、特定の焦点要素を表示する前に、単純にクリック機能

内forloopを追加upholder.soすべてupholdersを隠すジョアン

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

問題は何ですか？ –

あなたは「あなたが2番目にいるときにあなたの名前のようなテキストを隠すことを意味しましたか？ 3日目に「あなたのEメールアドレス」を非表示にしてください。 – 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

、事前にありがとう

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」のような関数を作成することができます。フォーカスが外部要素に与えられている場合（必要な場合のみ）、すべてのupholdersを非表示にする必要がある場合に備えて、別の関数を使用すると便利です。

出典

2017-09-14 10:00:41 SkullFlame

は、私はあなたが主に

要素がフォーカス
だけトリガーをしないイベントを失った場合にトリガするイベントを探していると思うときに、ユーザーフィールドをクリックするだけでなく、tabを押すとそのフィールドに入ります。

私はそれを削除するツールチップとblurを設定するfocusの代わりclickを使用するようにコードを書き換えました。非常にスムーズに動作します。

は、ここで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については

から行われた変更：

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

：から作られたclickイベント、変更のための

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

：（HTMLノードのコレクションが配列に変換）に

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

〜へ：

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を表示しない

答えて

関連する問題