zoukankan      html  css  js  c++  java
  • 为网页表单提交绑定回车快捷键

    最近做个视频弹幕,由于遇到需要按回车就能发送表单消息的需求,因此总结下,使用jquery如何捕获回车事件及绑定办法。

    代码如下:

                $("#TM-form").on("keydown",function(e){   //#TM-form为要发送消息的表单id,
                  var e = e||event;                
                  var kc = e.which ||e.keyCode;
                   e.stopPropagation();       //阻止事件冒泡
                   
                  if(kc == 13){
    
                      TMdata.fontSize = $("#fontSize").val();
                      TMdata.fontMode = $("#fontMode").val();
                      TMdata.fontColor = $("#fontColor").val();
                      TMdata.msg = $("#msg").val();
                      TMdata.vid = $(".TM-send").data("vid");
                                                               //表单需发送的数据
                    $(".TM-send").triggerHandler("click");    
                    e.preventDefault();   //必需
                  }
                })

    第一个问题是兼容事件问题,解决方法如下:

                  var e = e||event;                
                  var kc = e.which ||e.keyCode;

    第二个问题:写绑定时,遇到的问题是回车后会发生页面刷新,主要问题是没有e.preventDefault(),阻止默认事件发生;

    而添加在if(kc == 13)外面,则表单按键不输入数据,原因也是阻止了输入数据这个默认数据。

    $(".TM-send").triggerHandler("click");宜用triggerHandler代替tigger;

    第三个问题:事件触发后发现提交的数据是上一次输入的数据,解决办法是重新再获取一次数据,如下

                      TMdata.fontSize = $("#fontSize").val();
                      TMdata.fontMode = $("#fontMode").val();
                      TMdata.fontColor = $("#fontColor").val();
                      TMdata.msg = $("#msg").val();
                      TMdata.vid = $(".TM-send").data("vid");

  • 相关阅读:
    prometheus TSDB和外部存储系统
    Prometheus时序数据
    Prometheus简介
    Docker网络
    Ingress
    CRI和多容器运行时
    K8s容器存储接口(CSI)介绍
    EasyNVR视频广场点击视频后切换码流才能播放是什么原因?
    EasyNVR更新H265转H264模块内存增长且显示占用高如何解决?
    EasyNVR拉公网RTSP流失败问题调试和解决
  • 原文地址:https://www.cnblogs.com/hanbingljw/p/3964949.html
Copyright © 2011-2022 走看看