在上一個(gè)文章中簡(jiǎn)易實(shí)現(xiàn)檢測(cè)輸入已完成,我們實(shí)現(xiàn)了檢測(cè)輸入已完成,現(xiàn)在我們?cè)龠M(jìn)一步,在此基礎(chǔ)上,實(shí)現(xiàn)檢測(cè)輸入已完成自動(dòng)填寫(xiě)下一個(gè)內(nèi)容。
當(dāng)我們需要自動(dòng)填寫(xiě)的內(nèi)容,不希望被更改的時(shí)候,需要加上readonly屬性。
功能需求
填寫(xiě)報(bào)銷(xiāo)單據(jù)的時(shí)候只需填寫(xiě)出差天數(shù)自動(dòng)計(jì)算出差補(bǔ)貼金額
代碼如下
HTML代碼:
<tbody>
<tr style="background-color:#FfFFFF">
<th colspan="2" class="info">出差補(bǔ)貼:</th>
</tr>
<tr style="background-color:#F3F3F3">
<th>補(bǔ)貼天數(shù):</th>
<td>
<input class="form-control" onBlur="finnishInput(event)" "onInput(event)" id="travelAllowanceDaysId" type="number" placeholder="">
</td>
</tr>
<tr style="background-color:#FFFFFF">
<th>補(bǔ)貼金額:</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);
}
}
結(jié)果如下
總結(jié)
以上所述是小編給大家介紹的HTML檢測(cè)輸入已完成自動(dòng)填寫(xiě)下一個(gè)內(nèi)容的實(shí)現(xiàn)方法 ,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!