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! |
<<: Detailed explanation of non-parent-child component communication in Vue3
>>: Docker Modify Docker storage location Modify container image size limit operation
This time I will talk about the skills of develop...
HTML tag: superscript In HTML, the <sup> tag...
Recently, Oracle announced the public availabilit...
If you are a developer looking to get into the wo...
As a front-end novice, I tinkered with the front-e...
character Decimal Character Number Entity Name --...
Here are 10 HTML tags that are underused or misun...
Table of contents 1. Overview 2. Attributes 1. Ma...
This article example shares the specific code of ...
1. Create users and authorize Creating users and ...
Application Scenario In many cases, we install so...
.imgbox{ width: 1200px; height: 612px; margin-rig...
Table of contents 1. Pull the image 2. Create a l...
1. Introduction Recently, I helped a friend to ma...
Table of contents Cause of the problem: Solution:...