APICloud檢測輸入已完成自動填寫下一個內容

在上一個部落格中APICloud簡易實現檢測輸入已完成，我們實現了檢測輸入已完成，現在我們再進一步，在此基礎上，實現檢測輸入已完成自動填寫下一個內容。
當我們需要自動填寫的內容，不希望被更改的時候，需要加上readonly屬性（對應如何增加和刪除屬性不熟悉的話可以參考這個網址APICloud前端框架）。

• 功能需求
  填寫報銷單據的時候只需填寫出差天數自動計算出差補貼金額

• 程式碼如下
  HTML程式碼：

<tbody>
    <tr style="background-color:#FfFFFF">
        <th colspan="2" class="info">出差補貼:</th>
    </tr>
    <tr style="background-color:#F3F3F3">
        <th>補貼天數:</th>
        <td>
            <input class="form-control" onBlur="finnishInput(event)" oninput="onInput(event)" id="travelAllowanceDaysId" type="number" placeholder="">
        </td>
    </tr>
    <tr style="background-color:#FFFFFF">
        <th>補貼金額:</th>
        <td>
            <input class="form-control" id="travelAllowanceFeesId" type="number" placeholder="">
        </td>
    </tr>
</tbody>
 

JavaScript程式碼：

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);
    }
}

 

• 結果如下