jQueryを使用せずに、各変更時にフォーム入力の現在値を取得する方法

ここではフォームの検証として表記フォームを作成しようとしています。 chlerctersだから私はid="nom"と入力にイベントのリスナーを追加しましたが、ここで発生する問題は、コードが空の初期値だけを取得するので、ユーザーが指定された入力フィールドイベントは空の値で起動されます。jQueryを使用せずに、各変更時にフォーム入力の現在値を取得する方法

`<!DOCTYPE html> 
    <html> 
      <head> 
      <meta charset="utf-8"> 
      <link rel="stylesheet" href="style.css"> 

      </head> 
    <body> 
     <form action="#" method="get"> 
      <fieldset id="fieldset"> 
       <legend>Inscription :</legend> 

       <label for="">Sexe :</label><br> 
       <input type="radio" name="gender" value="male" checked><label for="male">Homme</label> 
       <br><input type="radio" name="gender" value="female"><label for="female">Femme</label> 
       <br><sapn class="tooltip">Vous devez selectionner votre sexe</sapn> 

       <br><br><label>Nom :</label><br> 
       <input type="text" id="nom"> 
       <sapn class="tooltip">Un nom ne peut pas faire moins de 2 caractères</sapn> 

       <br><br><label>Prénom :</label><br> 
       <input type="text" id="prenom"> 
       <sapn class="tooltip">Un prénom ne peut pas faire moins de 2 caractères</sapn> 

       <br><br><label>Age :</label><br> 
       <input type="text" id="age"> 
       <sapn class="tooltip">l'age doit etre compris entre 5 et 140</sapn> 

       <br><br><label>Pseudo :</label><br> 
       <input type="text" id="pseudo"> 
       <sapn class="tooltip">Le pseudo ne peut pas faire moins de 4 caractères</sapn> 

       <br><br><label>Mot de passe :</label><br> 
       <input type="password" id="mdp"> 
       <sapn class="tooltip">Le mot de passe ne peut pas faire moins de 6 caractères</sapn> 

       <br><br><label>Mot de passe (confirmation):</label><br> 
       <input type="password" id="mdpconf"> 
       <sapn class="tooltip">Le mot de passe de confirmation doit etre identique à celui d'origine</sapn> 

       <br><br><label for="country">Pays :</label><br> 
       <select name="country" id="country">   
         <option value="none" selected >Selectionnez votre pays</option> 
         <option value="Allemagne" >Allemagne</option> 
         <option value="France" >France</option> 
         <option value="Tunisie" >Tunisie</option> 
       </select> 
       <sapn class="tooltip">Vous devez selectionner votre pays de résidence</sapn> 

       <br><br><label for="mail">Recevoir des mails </label> 
       <input type="checkbox" class="answer"> 

       <br><br><input type="submit" value="M'inscrire" id="submit"> 
       <input type="reset" value="Reintitialiser le formulaure" id="reset"> 


      </fieldset> 

     </form> 
     <script> 
       (function(){ 
       var nom = document.getElementById('nom'); 
       var prenom = document.getElementById('prenom'); 
       var sexe = document.querySelectorAll('input[type = checkbox],checked'); 
       var age = document.getElementById('age'); 
       var pseudo = document.getElementById('pseudo'); 
       var mdp = document.getElementById('mdp'); 
       var mdpconf = document.getElementById('mdpconf'); 
       var pays = document.getElementById('country'); 
       var tooltips = document.querySelectorAll(".tooltip"); 
       for(i = 0;i < tooltips.length; i++){ 
        tooltips[i].style.display = 'none'; 
       } 
       function moreThenTwo(text){ 

        if (text.value.length < 2){ 

          text.style.borderColor="red"; 
          tooltips[1].style.display = "inline-block"; 
          age.value = text.value.length; 
          } 
          else 
          text.style.borderColor = "green"; 
         }; 

         nom.addEventListener('change',moreThenTwo(nom)); 

       })(); 

     </script> 
    </body> 
    </html>`

出典

2017-08-06 Nidhal Arouri

あなたはid="nom"で入力フィールドにoninputイベントを使用する必要があります。

nom.addEventListener('input', function moreThenTwo(e){ 
    var field = e.target; 
    if (field.value.length < 2){ 
     field.style.borderColor="red"; 
     tooltips[1].style.display = "inline-block"; 
     age.value = field.value.length; 
    } else { 
     field.style.borderColor = "green"; 
    } 
});

イベントハンドラでこれを直接使用することもできます。

nom.addEventListener('input', function moreThenTwo(e){ 

    if (this.value.length < 2){ 
     this.style.borderColor="red"; 
     tooltips[1].style.display = "inline-block"; 
     age.value = this.value.length; 
    } else { 
     this.style.borderColor = "green"; 
    } 
});

出典

2017-08-06 07:45:08 asmmahmud

感謝をaddEventListnerメソッドを使用すると思います。 –

使用の両方onKeyPress()とonKeyUp()：

function myFun() { 
 
    var value = document.getElementById("inp").value; 
 
    var lblValue = document.getElementById("lblValue"); 
 
    lblValue.innerText = "Text: " + value; 
 
    
 
}

<input id="inp" type="text" onKeyPress="myFun()" onKeyUp="myFun()"><br> 
 
<span id="lblValue">Text: </span>

出典

2017-08-06 06:50:23 Tushar

協力いただきありがとうございますが、しかし、アプリケーションとして、私はむしろ私のコードでは、それは実際にあなたの命題で今働いている助けるため –

jQueryを使用せずに、各変更時にフォーム入力の現在値を取得する方法

答えて

関連する問題