入力完了を検知して次の内容を自動記入するHTMLの実装方法

前回は入力完了の検出を実装しましたが、これを基にさらに一歩進んで入力完了の検出を実現します。完了し、次の内容が自動的に入力されます。

コンテンツを自動的に入力する必要があり、変更されたくない場合は、readonly 属性を追加する必要があります。

申請書に出張日数を記入するだけで、出張補助額が自動計算されます。

コードは次のとおりです

 <tbody> <tr style=background-color:#FfFFFF> <thcolspan=2 class=info>出張補助金:</th> </tr> <tr style=background-color:#F3F3F3> <th>番号補助金日数:</th> <td> <input class=form-control onBlur=finnishInput(event) 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 フラグ = 0; 関数 onInput(e) { console.log(入力) フラグ = 1; $api.byId('travelAllowanceFeesId'), 'readonly'); } 関数 finnishInput(e) { (1 == フラグ) { console.log(InputOk); $api.byId('travelAllowanceFeesId').value = 400*$api.byId('travelAllowanceDaysId').value; $api.attr($api.byId('travelAllowanceFeesId'), 'readonly', true);

結果は次のとおりです

以上がHTML入力完了を検知して次の内容を自動入力するための実装方法です。ご不明な点がございましたら、メッセージを残していただければ幸いです。編集者が時間内にご返信いたします。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！

この記事が役立つと思われる場合は、転載していただいてかまいませんので、出典を明示してください。ありがとうございます。