• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

在上一个文章中简易实现检测输入已完成,我们实现了检测输入已完成,现在我们再进一步,在此基础上,实现检测输入已完成自动填写下一个内容。

当我们需要自动填写的内容,不希望被更改的时候,需要加上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检测输入已完成自动填写下一个内容的实现方法 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对极客世界网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
解决微信小程序scroll-view换行问题发布时间:2022-06-21
下一篇:
HTML实现检测输入已完成功能发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap