Wie validiere ich die Antwort mit der Eingabetaste?

Question

Ich habe ein Eingabefeld erstellt, das mit der Tabulatortaste validiert wird, aber nach dem Drücken der Eingabetaste bestätigt werden muss.

Hier wird das Häkchen-Symbol erst, nachdem ich die richtige Antwort geben angezeigt und dann auf den Tab drücken. Dann geht es zum nächsten Eingabefeld und auch Validierung findet statt.

Aber die Validierung muss erfolgen, wenn ich die richtige Antwort eintippe und die Eingabetaste in das Eingabefeld selbst drücke.

Dafür habe ich schon versucht, diese JS-Code:

$(document).keypress(function(e) { 
    if(e.which == 13) { 
    checktxt(h,v,w,c) 
    } 
}); 

function checktxt(h,v,w,c) { 
    var th=$("#"+h).val(); 
    var tv=$("#"+v).val(); 
    if(th.toLowerCase()==tv.toLowerCase()) { 
    $("."+c).show(); 
    $("."+w).hide(); 
    } else if(tv.toLowerCase()=="") { 
    } else { 
    $("."+c).hide(); 
    $("."+w).show(); 
    } 
} 

Aber auch ist es nicht validiert werden, wenn ich die Enter-Taste drücken.

Und mein HTML-Code ist

<div> 
    <input id="texthidden1" type="hidden" value="877" /> 
    <input id="textvisible1" type="text" value="" onblur="javascript:checktxt('texthidden1','textvisible1','wrong1','correct1');" /> 
    <div class="wrong1"><img src="../images/smallwrong.png"/></div> 
    <div class="correct1"><img src="../images/smallgreen.png"/></div> 
</div> 

Ich brauche die Zecke Bild auch verschwunden sein, wenn ich den Inhalt des Eingabefeldes zu löschen.

Answer 1

Das Problem mit Ihnen Code ist dieser Teil in Ihrem keypress listner

checktxt(h,v,w,c) 

h, v, w und c hier nicht definiert sind, da der Code für onblur Ereignisse arbeiten gut, und Sie wollen das Gleiche replizieren Wenn Sie die Eingabetaste drücken, müssen Sie diese Variable in Ihrem Tastendruckereignis definieren.

Wenn Sie Ihren HTML-Code überprüfen, übergeben Sie die IDs aller Elemente an die Checktxt-Funktion in Ihrem JS.

Tun Sie das gleiche auch in Keypress Listener.

$(document).keypress(function(e) { 
    if(e.which == 13) { 
    checktxt('texthidden1','textvisible1','wrong1','correct1') 
    } 
}); 

$(document).keypress(function(e) { 
 
    if (e.which == 13) { 
 
    checktxt('texthidden1', 'textvisible1', 'wrong1', 'correct1') 
 
    } 
 
}); 
 

 
function checktxt(h, v, w, c) { 
 
    var th = $("#" + h).val(); 
 
    var tv = $("#" + v).val(); 
 
    if (th.toLowerCase() == tv.toLowerCase()) { 
 
    $("." + c).show(); 
 
    $("." + w).hide(); 
 
    } else if (tv.toLowerCase() == "") {} else { 
 
    $("." + c).hide(); 
 
    $("." + w).show(); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input id="texthidden1" type="hidden" value="877" /> 
 
    <input id="textvisible1" type="text" value="" onblur="javascript:checktxt('texthidden1','textvisible1','wrong1','correct1');" /> 
 
    <div class="wrong1"> 
 
    <img src="../images/smallwrong.png" /> 
 
    </div> 
 
    <div class="correct1"> 
 
    <img src="../images/smallgreen.png" /> 
 
    </div> 
 
</div>