So implementieren Sie HTML, um zu erkennen, ob die Eingabe abgeschlossen ist, und den nächsten Inhalt automatisch einzufügen

Im vorherigen Artikel haben wir die einfache Erkennung der Eingabevervollständigung realisiert. Jetzt gehen wir einen Schritt weiter und realisieren das automatische Ausfüllen des nächsten Inhalts nach Abschluss der Eingabe.

Wenn der Inhalt automatisch eingefügt werden muss und nicht geändert werden soll, müssen wir das schreibgeschützte Attribut hinzufügen.

Funktionale Anforderungen

Beim Ausfüllen des Erstattungsbelegs müssen Sie lediglich die Anzahl der Tage der Dienstreise eintragen und schon berechnet sich die Höhe des Dienstreisezuschusses automatisch.

Der Code lautet wie folgt

HTML Quelltext:

<tbody>
    <tr style="Hintergrundfarbe:#FfFFFF">
        <th colspan="2" class="info">Dienstreisepauschale:</th>
    </tr>
    <tr style="Hintergrundfarbe:#F3F3F3">
        <th>Fördertage:</th>
        <td>
            <input class="form-control" onBlur="finnishInput(event)" "onInput(event)" id="travelAllowanceDaysId" type="number" placeholder="">
        </td>
    </tr>
    <tr style="Hintergrundfarbe:#FFFFFF">
        <th>Förderhöhe:</th>
        <td>
            <input class="form-control" id="travelAllowanceFeesId" type="number" placeholder="">
        </td>
    </tr>
</tbody>

JavaScript-Code:

Var-Flagge = 0;

Funktion beiEingabe(e) {
    console.log("Eingabe");
    Flagge = 1;
    $api.removeAttr($api.byId('travelAllowanceFeesId'), 'schreibgeschützt');
}

Funktion finishInput(e) {
    wenn (1 == Flagge) {
        console.log("InputOk");
        Flagge = 0;

        $api.byId('travelAllowanceFeesId').value = 400*$api.byId('travelAllowanceDaysId').value;
        $api.attr($api.byId('travelAllowanceFeesId'), 'schreibgeschützt', true);
    }
}

Die Ergebnisse sind wie folgt

Zusammenfassen

Das Obige ist die Implementierungsmethode zum automatischen Ausfüllen des nächsten Inhalts, nachdem die HTML-Erkennungseingabe abgeschlossen ist. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!