How to implement HTML to detect that input is complete and automatically fill in the next content

In the previous article, we have realized the simple detection of input completion. Now we will go a step further and realize the automatic filling of the next content after the input is completed.

When we need to automatically fill in the content and do not want it to be changed, we need to add the readonly attribute.

Functional requirements

When filling out the reimbursement document, you only need to fill in the number of days of the business trip to automatically calculate the amount of the business trip subsidy.

The code is as follows

HTML code:

<tbody>
    <tr style="background-color:#FfFFFF">
        <th colspan="2" class="info">Business trip allowance:</th>
    </tr>
    <tr style="background-color:#F3F3F3">
        <th>Subsidy days:</th>
        <td>
            <input class="form-control" onBlur="finnishInput(event)" "onInput(event)" id="travelAllowanceDaysId" type="number" placeholder="">
        </td>
    </tr>
    <tr style="background-color:#FFFFFF">
        <th>Subsidy amount:</th>
        <td>
            <input class="form-control" id="travelAllowanceFeesId" type="number" placeholder="">
        </td>
    </tr>
</tbody>

JavaScript code:

var flag = 0;

function onInput(e) {
    console.log("Inputing");
    flag = 1;
    $api.removeAttr($api.byId('travelAllowanceFeesId'), 'readonly');
}

function finishInput(e) {
    if (1 == flag) {
        console.log("InputOk");
        flag = 0;

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

The results are as follows

Summarize

The above is the implementation method of automatically filling in the next content after HTML detection input is completed. I hope it will be helpful to everyone. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!