[开发技巧]·HTML检测输入已完成自动填写下一个内容
程序员文章站
2022-06-24 14:36:53
[开发技巧]·HTML检测输入已完成自动填写下一个内容 个人网站 --> http://www.yansongsong.cn 在上一个博客中简易实现检测输入已完成,我们实现了检测输入已完成,现在我们再进一步,在此基础上,实现检测输入已完成自动填写下一个内容。当我们需要自动填写的内容,不希望被更改的时 ......
[开发技巧]·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); } }