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 modify the ssh port number in Centos8 environment

Table of contents Preface start Preface The defau...

The docker-maven-plugin plugin cannot pull the corresponding jar package

When using the docker-maven-plugin plug-in, Maven...

Implement MySQL read-write separation and load balancing based on OneProxy

Introduction Part 1: Written at the beginning One...

Implementation of building Kubernetes cluster with VirtualBox+Ubuntu16

Table of contents About Kubernetes Basic environm...

How to test network speed with JavaScript

Table of contents Preface Summary of the principl...

Summary of common tool functions necessary for front-end development

1. Time formatting and other methods It is recomm...

Element table header row height problem solution

Table of contents Preface 1. Cause of the problem...

JavaScript implements checkbox selection function

This article example shares the specific code of ...

From CSS 3D to spatial coordinate axis with source code

One time we talked about the dice rolling game. A...

Web design must also first have a comprehensive image positioning of the website

⑴ Content determines form. First enrich the conten...