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

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!

<<:  Detailed explanation of non-parent-child component communication in Vue3

>>:  Docker Modify Docker storage location Modify container image size limit operation

Recommend

How to Install Oracle Java 14 on Ubuntu Linux

Recently, Oracle announced the public availabilit...

How to use localStorage in JavaScript

If you are a developer looking to get into the wo...

HTML special character conversion table

character Decimal Character Number Entity Name --...

10 Underused or Misunderstood HTML Tags

Here are 10 HTML tags that are underused or misun...

Summarize the common properties of BigIn functions in JavaScript

Table of contents 1. Overview 2. Attributes 1. Ma...

js implementation of verification code case

This article example shares the specific code of ...

How to use port 80 in Tomcat under Linux system

Application Scenario In many cases, we install so...

CSS box hide/show and then the top layer implementation code

.imgbox{ width: 1200px; height: 612px; margin-rig...

How to install Jenkins using Docker

Table of contents 1. Pull the image 2. Create a l...

JS operation object array to achieve add, delete, modify and query example code

1. Introduction Recently, I helped a friend to ma...