欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

[开发技巧]·HTML检测输入已完成自动填写下一个内容

程序员文章站 2022-03-20 19:13:34
[开发技巧]·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);
    }
}

 

结果如下

[开发技巧]·HTML检测输入已完成自动填写下一个内容