Asp.Net 让文本框在按回车键时表单不提交

calendar Jul 28, 2010   ---   · 2 min read · Asp.Net 表单  ·
Share on: linkedin copy
Asp.Net 的 WebForm 中光标在文本框时按回键默认就会提交表单，多数时候确实带来了很好的用户体验，输入数据后，手不用离开键去乱摸鼠标就能完成表单的提交。但总有例外不想要这种默认行为，一定有的，你遇到了就知道的，比如想在文本框中回车做别的事情，那就要点技巧的。

很多人可能会告诉你对文本框加个事件，回车的时候把 keyCode 由 13 变为 9(其实 keyCode 变为 9 是使回车相当于 Tab 键的功能)，不过还未完事，你并没有阻止事态进一步蔓延，Form 还是提交了。

1$(document).ready(function() {
2    $("#txt").keypress(function(event) {
3        if (event.keyCode == 13) {
4            event.keyCode = 9;
5
6            //do some of your things
7        }
8    });
9});

其实你要了稍加解浏览器的冒泡的事件模型，知道怎么适时的阻止浏览器的默认行为，有一个链接 http://kb.cnblogs.com/a/1363417/ 值得看下，内容如下：

在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。

1..停止事件冒泡


JavaScript代码

1//如果提供了事件对象，则这是一个非IE浏览器
2if ( e && e.stopPropagation )
3    //因此它支持W3C的stopPropagation()方法
4    e.stopPropagation();
5else
6    //否则，我们需要使用IE的方式来取消事件冒泡
7    window.event.cancelBubble = true;
8return false;

2.阻止浏览器的默认行为


JavaScript代码

1//如果提供了事件对象，则这是一个非IE浏览器
2if ( e && e.preventDefault )
3    //阻止默认浏览器动作(W3C)
4    e.preventDefault()
5else
6    //IE中阻止函数器默认动作的方式
7    window.event.returnValue = false
8return false;


这里就是要在文本框的键盘事件中当回车时阻止浏览器的下一步默认行为，高版本的浏览器都趋于规范化了，所以可以 IE7 及以上版本或其他的浏览器中都可以用 e.preventDefault(); 方法了。在你的网页中为文本框附加下面代码就行了：
 1$(document).ready(function() {
 2    $("#txt").keypress(function(event) {
 3        if (event.keyCode == 13) {
 4
 5            event.preventDefault();
 6
 7            //do some of your things
 8        }
 9    });
10});

以上代码用了最流行的 jQuery 来附加事件函数。这样可以试下，在 IE7/IE8 的兼容模式下、Opera、FireFox 文本框中按回车都不再提交表单了。

对于 IE 浏览器，用 window.event.returnValue = false; 来替代 event.preventDefault(); 也是可以的，其实不防加个浏览器判断把 window.event.returnValue = false;  也写保险些，反正用 jQuery 判断浏览器也方便，注意不是 event.returnValue = false; 哦，window 少不得。

当然若是在表单中没有放置提交按钮，文本框中任何时候按回车都不会提交，加上个提交按钮，即使是个隐藏的提交按钮后文本框才能获得这种默认行为。所以这也给了我们另一种解决回车不提表单的解决办法，把提交按钮改为普通按钮，给该普通按钮加个 onclick="this.form.submit()" 即可。

总结一下有三种办法：

1. 给文本框加个 keydown 事件，阻止浏览器的默认提交行为
2. 提交按钮改为普通按钮，onclick 中进行表单提交
3. 给表单加个隐藏的密码框也能达到如此效果

另外再加一个取巧的办法，给表单加一个不可见的 <input type="password" style="display:none"> 也能引起按回车而不提交表单的。

附录：

其实要用 jQuery 可以随时随地，直接通过 Google CDN 来加载就行，不用担心 Google 会不会当掉，只会出现被墙掉的可能。参考：http://code.google.com/apis/libraries/devguide.html#jquery，

用 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js "></script> 加载 jquery 库

或者用：<script type="text/javascript" src="http://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>，要先到 Google API key 注册一个 Key，放到 INSERT-YOUR-KEY 位置，然后就随时用如下的某一代码加载任何你想要脚本库：
 1google.load("chrome-frame", "1.0.2");
 2google.load("dojo", "1.5");
 3google.load("ext-core", "3.1.0");
 4google.load("jquery", "1.4.2");
 5google.load("jqueryui", "1.8.2");
 6google.load("mootools", "1.2.4");
 7google.load("prototype", "1.6.1.0");
 8google.load("scriptaculous", "1.8.3");
 9google.load("swfobject", "2.2");
10google.load("yui", "2.8.1");
11google.load("webfont", "1.0.6");
永久链接 https://yanbin.blog/textbox-no-enter-submit/, 来自 隔叶黄莺 Yanbin's Blog
[版权声明] 本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。