为网页表单提交绑定回车快捷键
2014-09-10 18:04
218 查看
最近做个视频弹幕,由于遇到需要按回车就能发送表单消息的需求,因此总结下,使用jquery如何捕获回车事件及绑定办法。
代码如下:
第一个问题是兼容事件问题,解决方法如下:
第二个问题:写绑定时,遇到的问题是回车后会发生页面刷新,主要问题是没有e.preventDefault(),阻止默认事件发生;
而添加在if(kc == 13)外面,则表单按键不输入数据,原因也是阻止了输入数据这个默认数据。
$(".TM-send").triggerHandler("click");宜用triggerHandler代替tigger;
第三个问题:事件触发后发现提交的数据是上一次输入的数据,解决办法是重新再获取一次数据,如下
代码如下:
$("#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");
相关文章推荐
- 回车网页文本框就提交表单
- 网页中表单按回车就自动提交的问题的解决方案
- 在asp.net 网页中加入回车切换焦点,回车提交表单
- 如何将回车提交表单事件绑定到textbox控件?
- 网页中表单按回车就自动提交的问题总结
- 登陆页面的form表单中存在radio时,鼠标点到radio时,回车提交快捷键功能消失的解决办法
- C#-WebForm-网页中Form表单中给回车绑定按钮
- 网页技巧总结:快捷键提交表单方法
- 网页中表单按回车就自动提交的问题的解决方案
- 如何将回车提交表单事件绑定到textbox控件?
- 网页技巧总结:快捷键提交表单方法
- 忆龙2009:用C#如何自动提交网页表单
- 网页中回车后form自动提交跳到其他页面的解决方法
- 网页小知识---onblur,onfocus和表单提交的两种方式
- 回车键触发表单提交问题
- 防止INPUT回车自动提交FORM表单
- 如何防止INPUT按回车自动提交表单FORM
- js光标定位文本框回车表单提交问题的解决方法
- 防止表单内回车自动提交
- 表单回车提交