HTML检测输入已完成自动填写下一个内容的实现方法

在上一个文章中浅显实现检测输入已完成，我们实现了检测输入已完成，此刻我们再进一步，在此基本上，实现检测输入已完成自动填写下一个内容。

当我们必要自动填写的内容，不但愿被变动的时辰，必要加上readonly属性。

成果需求

填写报销单子的时辰只需填写出差天数自动计较出差津贴金额

代码如下

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>

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

功效如下

总结

以上所述是小编给各人先容的HTML检测输入已完成自动填写下一个内容的实现要领 ,但愿对各人有所辅佐，假如各人有任何疑问请给我留言，小编会实时回覆各人的。在此也很是感激各人对剧本之家网站的支持！
假如你认为本文对你有辅佐，接待转载，烦请注明出处，感谢！

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!