Dynamisch entfernter Wert von Senden Schaltfläche entfernen, wenn ein Eingabefeld Werte haben

Question

Ich habe dieses Formular, das funktioniert. Ich kann nicht auf den Submit-Button klicken, wenn nicht 16 Ziffern im Feld input eingegeben wurden. Das Problem ist, dass es nur möglich ist, auf "Senden" zu klicken, wenn ich außerhalb des Eingabefeldes klicke.

Ich möchte, dass, wenn der Benutzer die letzte Ziffer eingibt, "disabled" automatisch entfernt wird, ohne dass zuerst außerhalb des Eingabefeldes geklickt werden muss. Wie kann ich das erreichen?

<form enctype="multipart/form-data" name="verify" method="post" action="https://something.com"> 
    <div class="form"> 
     <input id="inputNumber" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="16" name="number" value="Fyll in number" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" /> 
     <div class="notice"><span></span></div> 
</div> 
<input type="submit" value="ORDER" class="button" /> 
    </div> 
</form> 
<script> 
var $j = jQuery.noConflict(); 

$j(function(){ 

$j(document).ready(function(){ 
    validate(); 
    $j('#inputNumber').change(validate); 
    $j('.notice span').text(''); 
}); 

function validate(){ 
    if ($j('#inputNumber').val().length == 16) { 
     $j("input[type=submit]").prop("disabled", false); 
     $j("input[type=submit]").addClass("disabled-off"); 
     $j("input[type=submit]").removeClass("disabled-on disabled-colour"); 
     $j('.notice span').text(''); 
    } 
    else { 
     $j("input[type=submit]").prop("disabled", true); 
     $j("input[type=submit]").addClass("disabled-on disabled-colour"); 
     $j("input[type=submit]").removeClass("disabled-off"); 
     $j('.notice span').text('More numbers is needed'); 
    } 
} 
}); 
</script> 

Grüße Johan

Answer 1

Statt auf change Zuhörer Sie input Hörer verwenden:

$j('#inputNumber').on('input', validate); 

(und beachten Sie, dass Sie </div> haben eine zusätzliche Schließung) Demo Siehe unten:

var $j = jQuery.noConflict(); 
 

 
$j(function() { 
 

 
    $j(document).ready(function() { 
 
    validate(); 
 
    $j('#inputNumber').on('input', validate); 
 
    $j('.notice span').text(''); 
 
    }); 
 

 
    function validate() { 
 
    if ($j('#inputNumber').val().length == 16) { 
 
     $j("input[type=submit]").prop("disabled", false); 
 
     $j("input[type=submit]").addClass("disabled-off"); 
 
     $j("input[type=submit]").removeClass("disabled-on disabled-colour"); 
 
     $j('.notice span').text(''); 
 
    } else { 
 
     $j("input[type=submit]").prop("disabled", true); 
 
     $j("input[type=submit]").addClass("disabled-on disabled-colour"); 
 
     $j("input[type=submit]").removeClass("disabled-off"); 
 
     $j('.notice span').text('More numbers is needed'); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form enctype="multipart/form-data" name="verify" method="post" action="https://something.com"> 
 
    <div class="form"> 
 
    <input id="inputNumber" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="16" name="number" value="Fyll in number" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" 
 
    /> 
 
    <div class="notice"><span></span></div> 
 
    <!--</div>--> 
 
    <input type="submit" value="ORDER" class="button"/> 
 
    </div> 
 
</form>