為網頁表單提交綁定斷行符號快速鍵

標籤：style   blog   color   io   使用   ar   for   資料   div   

最近做個視頻彈幕，由於遇到需要按斷行符號就能發送表單訊息的需求，因此總結下，使用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");

 

為網頁表單提交綁定斷行符號快速鍵