前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >C#开发中表单提交Ctrl+Enter和Enter快捷键的jQuery实现方式

C#开发中表单提交Ctrl+Enter和Enter快捷键的jQuery实现方式

作者头像
崔文远TroyCui
发布2019-02-26 16:32:32
1.1K0
发布2019-02-26 16:32:32
举报
文章被收录于专栏:远在上海远在上海

以前写HRM系统的时候,通过C#代码和javascript实现过文本输入框中Enter提交表单的功能,使用的原理是针对textbox进行Enter键的监控,如果输入了Enter就调用C#的指定Button功能,这里可以支持同一个表单多个button可以任意选择触发其中的某个button。

前端javascript代码如下:

<br/><script type=text/javascript><br/>    function doClick(buttonName, e) {<br/>        //the purpose of this function is to allow the enter key to <br/>        //point to the correct button to click.<br/>        var key;<br/><br/>        if (window.event)<br/>            key = window.event.keyCode;     //IE<br/>        else<br/>            key = e.which;     //firefox<br/><br/>        if (key == 13) {<br/>            //Get the button the user wants to have clicked<br/>            var btn = document.getElementById(buttonName);<br/>            if (btn != null) { //If we find the button click it<br/>                btn.click();<br/>                event.keyCode = 0<br/>            }<br/>        }<br/>    }</script><br/>

后端C#在Page_Load中的if (!IsPostBack)部分加入如下代码:

<br/>txtEmployeeID.Attributes.Add("onKeyPress", "doClick('" + btnSearch.ClientID + "',event)");<br/>

今天在搞OA里面的任务管理开发的时候,希望能后使用通用的Ctrl+Enter进行自动提交任务评论,找到如下完全客户端的解决方案,使用到jQuery库,原文:[URL=http://pangbu.com/jquery-ctrl-enter-submit-form/]http://pangbu.com/jquery-ctrl-enter-submit-form/[/URL],稍作修改代码如下:

<br/>$('body').keypress(function(event){<br/>  if(event.ctrlKey && (event.which == 13 || event.which == 10)) {<br/>    $('#btnSubmit').click();<br/>  }<br/>});<br/>

1、$(‘body’) 是表明焦点在哪里的时候Ctrl+Eenter才有用 2、keypress()是绑定按键按下事件 3、if(event.ctrlKey && (event.which == 13 || event.which == 10))这句很简单,就是检测你是不是同时按下了 Ctrl 和回车(event.which == 13大键盘区回车 、event.which == 10 小键盘区回车 ) 4、$(‘#submit’).click();按下哪个按钮

补充阅读:[URL=http://api.jquery.com/event.which/]jQuery event.which[/URL]

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2013年11月25日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档