Onclick überprüfen, ob das Eingabefeld leer ist, dann Onclick den Text zu ändern, um das Kennwort

Question

ich HTML-Code haben:

<input type="text" class="input_discount" id="discountCode" placeholder="ENTER YOUR TEXT"> 

<button type="button" class="btn apply_btn" id="changeType" required/>APPLY</button> 

JS:

$('#changeType').click(function(){ 
    $('#discountCode').attr('type','password'); 
}); 

Der Code funktioniert gut. Aber wenn ich den Text in das Eingabefeld eintrage und auf die Anwenden-Schaltfläche klicke, wird der Eingabe-Typ in ein Passwort umgewandelt. Aber wenn ich direkt auf die Schaltfläche "Anwenden" klicke und dann in das Eingabefeld schreibe, wird das Passwort-Format angezeigt. Kann mir jemand sagen, wie man das verhindert, wenn das Eingabefeld leer ist und der Benutzer auf die Schaltfläche "Anwenden" klickt, bleibt der Eingabetyp fokussiert und sollte im Textformat sein. Nach dem Ausfüllen der Details sollte er in das Passwortformat konvertiert werden.

Answer 1

Warum Ihr Code nicht funktionierte.

Wenn nichts eingegeben wurde, wurde gemäß Ihrem Code der Text in Text umgewandelt.

Lösung I angewendet

Während die Schaltfläche geklickt wird, prüfen Sie, ob Textbox leer ist oder nicht.

Hinweis: Ich erwäge space als ein gültiges Zeichen in der Eingabebox, weil es für das Passwort verwendet werden kann. Wenn Sie space beseitigen möchten, können Sie $('#discountCode').val().trim().length

Working Demo

$('#changeType').click(function(e) { 
 
    if ($('#discountCode').val().length) { 
 
    $('#discountCode').attr('type', 'password'); 
 
    } else { 
 
    $('#discountCode').attr('type', 'text'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="input_discount" id="discountCode" placeholder="ENTER YOUR TEXT"> 
 

 
<button type="button" class="btn apply_btn" id="changeType" required/>APPLY</button>