前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >EasyNVR HLS 、RTMP网页直播方案前端完善:监听表单变动

EasyNVR HLS 、RTMP网页直播方案前端完善:监听表单变动

作者头像
EasyNVR
发布2020-04-23 15:48:22
7750
发布2020-04-23 15:48:22
举报
文章被收录于专栏:EasyNVR

在上一篇博客中我们表述完了防止提交成功后多余操作提交的一个过程;其中的精髓在于ajax的触发事件的使用。 而这篇博客主要想说明一下如何实时的判断出表单是否发生变化。

问题表述:

在网页前端的开发过程中时常遇到这样的需求,监听表单的状态。 对于表单的状态为非就是,表单内容发生变化、表单内容没有发生变化。

作为开发者的我们要做的就是: 当表单发生变化后实时的进行相应的操作; 表单没有变化(在这里我个人将,在没有提交前表单内容变动了,但是表单内容最终还是和初始一样回到最初的内容都视为表单没有变动)在进行相应操作。

问题分析:

基于需求,我们的主要目的是监听表单内容;

不同与我们监听应input的是我们监听的表单往往不仅仅只有一个input框,往往有多个,往往还是多种类型的。。。。这些,无形中都给我们来监听表单内容增加了难度。我们可以给每一个表单里面的输入框、选择框绑定一个事件来监听自身的内容变化,但是我们如何将form表单里面的输入框给统一起来?

我的方法:

可能还有其他更nice的方法,但是我的做法是将表单里面的输入框内容以字符串形式拼接起来,分别将表单变化前后的内容都以字符串形式先存储起来,然后通过对比,这两个字符串来判断表单是否,发生变化。

实例讲解:

其实我接到这个需求就是来自我们的“RTSP转RTMP、HLS网页无插件直播神器”EasyNVR;

EasyNVR
EasyNVR

我们的需求是,表单没有发生变化的时候,提交按钮是屏蔽的;

分析都在上面了,下面直接上代码: 在表单的对应输入框都有绑定oninput事件来监听表单的变化;

HTML代码(给表单需要的输入框绑定监听事件oninput):

代码语言:javascript
复制
   <form role="form" class="form-horizontal" data-toggle="validator" data-disable="false">
                    <input type="hidden" id="service-auth" name="LiveStreamingAuth">
                    <div class="form-group">
                        <label for="service-lan-port" class="col-sm-4 control-label">EasyNVR 本地端口</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="service-lan-port" name="ServiceLanPort" pattern="^[0-9]+$" disabled="true">
                            <span class="help-block with-errors"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="service-lan-ip" class="col-sm-4 control-label">RTMP端口</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="service-rtmp-port" name="NginxRTMPPort" oninput="checkVal()">
                            <span class="help-block with-errors"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="service-lan-ip" class="col-sm-4 control-label">EasyNVR 本地地址</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="service-lan-ip" name="ServiceLanIP" disabled="true">
                            <span class="help-block with-errors"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="service-check-auth" class="col-sm-4 control-label">直播页面鉴权</label>
                        <div class="col-sm-7 checkbox">
                            <label><input type="checkbox" id="service-check-auth"></label>
                            <span class="help-block with-errors"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="channel-snap-interval" class="col-sm-4 control-label">快照间隔时间(分钟)</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="channel-snap-interval" name="ChannelSnapInterval" pattern="^[0-9]+$" oninput="checkVal()" required>
                            <span class="help-block with-errors"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-4 col-sm-7">
                            <button type="submit" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </form>

JS代码(主要是分别将表单变动前后内容拼接为字符串):

代码语言:javascript
复制
function checkVal(){
        var nowForm = $("#nvr-config form").serialize();
        var oldForm = $("#nvr-config form").data("formVal");
        var position = nowForm.indexOf("NginxRTMPPort");
        nowForm=nowForm.substring(position,nowForm.length);//取后部分
        oldForm=oldForm.substring(position,oldForm.length);//取后部分
        if($("#service-auth").data("val")==1){
            oldForm = oldForm + "true";
        }else{
            oldForm = oldForm + "false";
        }
        var status = document.getElementById("service-check-auth").checked;
        nowForm =nowForm + status;
        if(nowForm==oldForm){
            $('#nvr-config form :submit').prop("disabled", true);//屏蔽保存按钮
        }else{
            $('#nvr-config form :submit').prop("disabled", false);
        }
    }

备注:

可能有的小伙伴会问,要是表单中存select或是check选择按钮怎么处理。其实这个可以转换一下思路,我们可以将布尔值select里面的值都转为字符串来进行拼接。其实同样可以达到需求。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-11-01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 问题表述:
  • 问题分析:
    • 我的方法:
    • 实例讲解:
    • 备注:
    相关产品与服务
    云直播
    云直播(Cloud Streaming Services,CSS)为您提供极速、稳定、专业的云端直播处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、快直播、云导播台三种服务,分别针对大规模实时观看、超低延时直播、便捷云端导播的场景,配合腾讯云视立方·直播 SDK,为您提供一站式的音视频直播解决方案。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档