입력이 완료되었음을 감지하고 다음 내용을 자동으로 채워주는 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(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>

자바스크립트 코드:

 var flag = 0; function onInput(e) { console.log(Inputing); $api.removeAttr($api.byId('travelAllowanceFeesId'), 'readonly');} function finnishInput(e) (1 == 플래그) { console.log(InputOk) 플래그 = 0; $api.byId('travelAllowanceFeesId').value = 400*$api.byId('travelAllowanceDaysId').value; $api.attr($api.byId('travelAllowanceFeesId'), 'readonly', true);

결과는 다음과 같습니다

위 내용은 HTML 입력이 완료되었음을 감지하고 자동으로 다음 내용을 채워주기 위해 에디터가 소개하는 구현 방법입니다. 궁금한 점이 있으시면 메시지를 남겨주세요. 편집자가 제때에 답변해 드릴 것입니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

이 글이 도움이 되셨다면 재인쇄하셔도 좋고, 출처를 밝혀주시면 감사하겠습니다!