为网页表单提交绑定回车快捷键

浏览数：46 / 时间：2015年06月09日

最近做个视频弹幕，由于遇到需要按回车就能发送表单消息的需求，因此总结下，使用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");

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

为网页表单提交绑定回车快捷键