您的位置:首页 > 其它

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

2014-09-10 18:04 218 查看
最近做个视频弹幕,由于遇到需要按回车就能发送表单消息的需求,因此总结下,使用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");
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: