Implementation method of HTML detecting that the input has been completed and automatically filling in the next content

In the previous article, we simply implemented the detection that the input has been completed. We have implemented the detection that the input has been completed. Now we go one step further. On this basis, we can realize the detection that the input has been completed and automatically fill in the next content.

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

When filling in the reimbursement form, you only need to fill in the number of days of business trip and the amount of business trip subsidy will be automatically calculated.

The code is as follows

 <tbody> <tr style=background-color:#FfFFFF> <th colspan=2 class=info>Business trip subsidy:</th> </tr> <tr style=background-color:#F3F3F3> <th>Number of 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 finnishInput(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

The above is the implementation method that the editor introduces to you to detect that the HTML input has been completed and automatically fill in the next content. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!

If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!