当前位置: 58彩票app下载 > 计算机网络 > 正文

让文本框在按回车键时表单不付出,对堵住事件

时间:2019-09-18 11:14来源:计算机网络
首先页面上有一个 textarea id="test"/textarea 我们为其绑定以下事件 Asp.Net 的 WebForm中光标在文本框时按回键默认就会提交表单,多数时候确实带来了很好的用户体验,输入数据后,手不用离

首先页面上有一个 <textarea id="test"></textarea>
我们为其绑定以下事件

Asp.Net 的 WebForm 中光标在文本框时按回键默认就会提交表单,多数时候确实带来了很好的用户体验,输入数据后,手不用离开键去乱摸鼠标就能完成表单的提交。但总有例外不想要这种默认行为,一定有的,你遇到了就知道的,比如想在文本框中回车做别的事情,那就要点技巧的。
很多人可能会告诉你对文本框加个事件,回车的时候把 keyCode 由 13 变为 9(其实 keyCode 变为 9 是使回车相当于 Tab 键的功能),不过还未完事,你并没有阻止事态进一步蔓延,Form 还是提交了。

复制代码 代码如下:

$(document).ready(function() {  

test.onkeydown = function(){
return false;
}

   $("#txt").keypress(function(event) { 

test.onkeyup = function(){
return false;
}

        if (event.keyCode == 13) {  

test.onkeypress = function(){
return false;
}

           event.keyCode = 9;

我们分别注释掉其中的两个事件,每次测试仅绑定一个事件。
很明显我们每个函数都返回false,如果返回值可以阻止事件默认动作,那么文本框将无法输入任何内容。
看下面我测试的结果,注意红的部分。
最后我分别把事件绑定两次,每次返回false看是否能阻止默认动作。
还是用了一个a标记测试onclick 返回false 是否跳转。

   //do some of your things 

侦听事件返回 false 是否阻止事件默认动作

}    

 

 });

chrome

});

IE-8

其实你要了稍加解浏览器的冒泡的事件模型,知道怎么适时的阻止浏览器的默认行为,有一个链接 http://kb.cnblogs.com/a/1363417/ 值得看下,内容如下:
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。

firfox

1..停止事件冒泡

oper

JavaScript代码

Safari

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

onkeydown

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

yes

JavaScript代码

yes

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

yes


no

这里就是要在文本框的键盘事件中当回车时阻止浏览器的下一步默认行为,高版本的浏览器都趋于规范化了,所以可以 IE7 及以上版本或其他的浏览器中都可以用 e.preventDefault(); 方法了。在你的网页中为文本框附加下面代码就行了:
$(document).ready(function() {    

yes

$("#txt").keypress(function(event) {

onkeyup

        if (event.keyCode == 13) {   

no

                      event.preventDefault();    

no

            //do some of your things     

no

    }

no

    });

no

});
以上代码用了最流行的 jQuery 来附加事件函数。这样可以试下,在 IE7/IE8 的兼容模式下、Opera、FireFox 文本框中按回车都不再提交表单了。
对于 IE 浏览器,用 window.event.returnValue = false;

onkeypress

来替代 event.preventDefault(); 也是可以的,其实不防加个浏览器判断把 window.event.returnValue = false; 

yes

也写保险些,反正用 jQuery 判断浏览器也方便,注意不是 event.returnValue = false; 哦,window 少不得。
当然若是在表单中没有放置提交按钮,文本框中任何时候按回车都不会提交,加上个提交按钮,即使是个隐藏的提交按钮后文本框才能获得这种默认行为。

yes

所以这也给了我们另一种解决回车不提表单的解决办法,把提交按钮改为普通按钮,给该普通按钮加个 onclick="this.form.submit()" 即可。
总结一下有三种办法:

yes

  1. 给文本框加个 keydown 事件,阻止浏览器的默认提交行为 2. 提交按钮改为普通按钮,onclick 中进行表单提交 3. 给表单加个隐藏的密码框也能达到如此效果
    另外再加一个取巧的办法,给表单加一个不可见的 <input type="password" style="display:none"> 也能引起按回车而不提交表单的

yes

附录:
其实要用 jQuery 可以随时随地,直接通过 Google CDN 来加载就行,不用担心 Google 会不会当掉,只会出现被墙掉的可能。

yes

参考: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>,

onclick

要先到 Google API key 注册一个 Key,放到 INSERT-YOUR-KEY 位置,然后就随时用如下的某一代码加载任何你想要脚本库:
google.load("chrome-frame", "1.0.2");  

yes

google.load("dojo", "1.5");

yes

google.load("ext-core", "3.1.0");

yes

google.load("jquery", "1.4.2");  

yes

google.load("jqueryui", "1.8.2");

yes

google.load("mootools", "1.2.4");

keydown * 2

google.load("prototype", "1.6.1.0");

no

google.load("scriptaculous", "1.8.3");  

取最后的FN结果

google.load("swfobject", "2.2");  

no

google.load("yui", "2.8.1");  

no

google.load("webfont", "1.0.6");

no


keypress * 2

keydown事件

no

这个函数会调用执行绑定到keydown事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keydown事件会在键盘按下时触发。

取最后的FN结果

 

no

页面一回车进行的操作

no

$(document).keydown(function(e){
            e = e ? e : window.event;
            var keycode = e.which ? e.which : e.keyCode;
            if(keycode==13) 
            {  
                 //操作

no

                 return false;
            }
        });

click * 2

no

取最后的FN结果

no

no

no

e.preventDefault();

yes

no

yes

yes(keydown:no)

yes

e.returnValue = false

no

yes

no

no

no

可以看出浏览器表现确实不太一样,当然IE是最麻烦的东西了。
最意外的是在oper中 绑定down 返回false,居然也不能阻止默认动作。
所以以后在写要阻止浏览器默认动作的时候,还用标准的方法比较好。(后面我提供了)
不然在多人协作的工作中,会相当麻烦。
演示的deom 有需要的可以发邮件给我。我就不贴上来了。

复制代码 代码如下:

/* * 用下面的代码就不会发生悲剧了
* 最终结论
* E(e).stop(); 阻止时间冒泡
* E(e).prevent();阻止时间默认行为
*/
var E = function(e){
e = window.event || e;
return {
stop: function() {
if (e && e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true
},
prevent: function() {
if (e && e.preventDefault) e.preventDefault();
else e.returnValue = false
}
}
}

您可能感兴趣的文章:

  • return false;和e.preventDefault();的区别
  • 浅析onsubmit校验表单时利用ajax的return false无效问题
  • js中return false(阻止)的用法
  • 浅析return false的正确使用
  • Jquery的each里用return true或false代替break或continue
  • 学习jQuey中的return false

编辑:计算机网络 本文来源:让文本框在按回车键时表单不付出,对堵住事件

关键词: