·HTML detects that input has been completed and automatically fills in the next content

In the last blog post, APICloud simple implementation detection input is complete, we implemented detection input is complete, now we go one step further, based on this, implementation detection input is complete auto-fill the next content. When we need to automatically fill in the content and do not want to change, we need to add readonly attribute (how to add and remove attributes for those who are not familiar with this website can refer to the APICloud front-end framework).

  • When filling in the reimbursement document, you only need to fill in the number of days of business trip to automatically calculate the amount of business trip subsidy
  • The code is as follows:
<tbody> <tr style="background-color:#FfFFFF"> <th colspan="2" class="info" Style ="background-color:#F3F3F3"> <th> <td> <input class="form-control" onBlur="finnishInput(event)" "onInput(event)" id="travelAllowanceDaysId" type="number" placeholder=""> </td> </tr> <tr <td> <input class="form-control" id="travelAllowanceFeesId" style="background-color:#FFFFFF"> <th> type="number" placeholder=""> </td> </tr> </tbody>Copy the code

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); }}Copy the code
  • The results are as follows