jquery,文本框回车与change事件

篇一：利用Jquery实现键盘按键监听

Js代码

1. // shows a given element and hides all others

2. function showViaKeypress(element_id)

3. {

4. $(".container").css("display","none");

5. $(element_id).slideDown("slow");

6. }

7.

8. // shows proper DIV depending on link 'href'

9. function showViaLink(array)

10.{

11. array.each(function(i)

12. {

13. $(this).click(function()

14. {

15.var target = $(this).attr("href");

16.$(".container").css("display","none");

17.$(target).slideDown("slow");

18. });

19. });

20.}

而对键盘按键的监听是用的keypress()方法，其实也没什么难度，不过我们很少在页面上使用按键监听，这个例子比较新奇，值得我们参考，如有必要时，可以在项目里用用。

Js代码

1. $(document).keypress(function(e)

2. {

3.switch(e.which)

4.{

5. // user presses the "a"

6. case 97: showViaKeypress("#home");

7. break;

8.

9. // user presses the "s" key

10.case 115:showViaKeypress("#about");

11.break; 12.

13.// user presses the "d" key

14.case 100:showViaKeypress("#contact");

15.break;

16.

17.// user presses the "f" key

18.case 102:showViaKeypress("#awards");

19.break;

20.

21.// user presses the "g" key

22.case 103:showViaKeypress("#links");

23. }

24. });

Jquery 监视按键，按下回车键触发某方法

<script type="text/javascript">

$(function () {

$('input:text:first').focus(); //把焦点放在第一个文本框

var $inp = $('input'); //所有的input元素

$inp.keypress(function (e) { //这里给function一个事件参数命名为e，叫event也行，随意的，e就是IE窗口发生的事件。

var key = e.which; //e.which是按键的值

if (key == 13) {

alert("aaa");

}

});

});

一个奇怪现象：

我拖了一个Login控件，然后给它转化为template，用于自定义开发。

下 面的代码中，我捕捉到了文本栏的回车按键，这时我要去触发LoginButton来提交登录信息进行验证，可是我使用$(" [id$=LoginButton]").click();只在firefox上有效，在IE无效，歪打正着的尝试一下$("

[id$=LoginButton]").focus(); ，这个可以在IE上起效，在IE上focus()即完成了对焦又执行了点击，不解啊。呵呵~

$inp.keypress(function (event) {

var key = event.which;

if (key == 13) {

$("[id$=LoginButton]").click(); //支持firefox,IE武校//$('input:last').focus();

$("[id$=LoginButton]").focus(); //支持IE，firefox无效。 //以上两句实现既支持IE也支持 firefox

}

});

如何防止回车（enter）键提交表单 (所有按键对应的值)

如何防止回车（enter）键提交表单，其实很简单，就一句话。onkeydown= "if(event.keyCode==13)returnfalse;"把这句写在from标签里面就好了。下面介绍下javascript中event.keycode。

keycode 8 = BackSpace BackSpace

keycode 9 = Tab Tab

keycode 12 = Clear

keycode 13 = Enter

keycode 16 = Shift_L

keycode 17 = Control_L

keycode 18 = Alt_L

keycode 20 = Caps_Lock

keycode 27 = Escape Escape

keycode 32 = space space

keycode 33 = Prior

keycode 34 = Next

keycode 35 = End

keycode 36 = Home

keycode 37 = Left

keycode 38 = Up

keycode 39 = Right

keycode 40 = Down

keycode 41 = Select

keycode 42 = Print

keycode 43 = Execute

keycode 45 = Insert

keycode 46 = Delete

keycode 47 = Help

keycode 48 = 0 equal braceright keycode 49 = 1 exclam onesuperior keycode 50 = 2 quotedbl twosuperior keycode 51 = 3 section threesuperior keycode 52 = 4 dollar

keycode 53 = 5 percent

keycode 54 = 6 ampersand

keycode 55 = 7 slash braceleft

keycode 56 = 8 parenleft bracketleft keycode 57 = 9 pareight bracketright keycode 65 = a A

keycode 66 = b B

keycode 67 = c C

keycode 68 = d D

keycode 69 = e E EuroSign

keycode 70 = f F

keycode 71 = g G

keycode 72 = h H

keycode 73 = i I

keycode 74 = j J

keycode 75 = k K

keycode 76 = l L

keycode 77 = m M mu

keycode 78 = n N

keycode 79 = o O

keycode 80 = p P

keycode 82 = r R

keycode 83 = s S

keycode 84 = t T

keycode 85 = u U

keycode 86 = v V

keycode 87 = w W

keycode 88 = x X

keycode 89 = y Y

keycode 90 = z Z

keycode 96 = KP_0 KP_0

keycode 97 = KP_1 KP_1

keycode 98 = KP_2 KP_2

keycode 99 = KP_3 KP_3

keycode 100 = KP_4 KP_4

keycode 101 = KP_5 KP_5

keycode 102 = KP_6 KP_6

keycode 103 = KP_7 KP_7

keycode 104 = KP_8 KP_8

keycode 105 = KP_9 KP_9

keycode 106 = KP_Multiply KP_Multiply keycode 107 = KP_Add KP_Add

keycode 108 = KP_Separator KP_Separator keycode 109 = KP_Subtract KP_Subtract keycode 110 = KP_Decimal KP_Decimal keycode 111 = KP_Divide KP_Divide keycode 112 = F1

keycode 113 = F2

keycode 114 = F3

keycode 115 = F4

keycode 116 = F5

keycode 117 = F6

keycode 118 = F7

keycode 119 = F8

keycode 120 = F9

keycode 121 = F10

keycode 122 = F11

keycode 123 = F12

keycode 124 = F13

keycode 125 = F14

keycode 126 = F15

keycode 127 = F16

keycode 128 = F17

keycode 129 = F18

篇二：jquery笔记(6)jQuery事件之鼠标事件

jQuery事件之鼠标事件

鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。

(1):click事件：click事件于用户在元素敲击鼠标左键，并在相同元素上松开左键时触发。

$('p').click(function(){

alert('click function is running !');

});

(2):dbclick事件：dbclick事件在用户完成迅速连续的两次点击之后触发，双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用。

$('p').dbclick(function(){

alert('dbclick function is running !');

});

(3):mousedown事件：mousedown事件在用户敲击鼠标键时触发，跟keydown事件不一样，该事件仅在按下鼠标时触发。

$('p').mousedown(function(){

alert('mousedown function is running !');

});

(4):mouseup事件：mouseup事件在用户松开鼠标时触发，如果在与按下鼠标的元素相同元素上松开，那么click事件也会触发。$('p').mouseup(function(){

alert('mouseup function is running !');

}).click(function(){

alert('click function is running too !');

});

(5):mouseover事件：mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发，如果需要知道来自那个元素可以使用，relatedTagrget属性。

(6):mouseout事件：mouseout事件于用户把鼠标移出一个元素时触发，这包括从父元素移动到子元素上，或者使用键盘跳到元素上。

(5)和(6)这两个事件一般不常用，很难实现与用户的交互，也就是说不易捕获用户事件。

(7):mouseenter事件：mouseenter事件是在用户光标进入元素上时触发。

$('p').mouseenter(function(){

alert('mouseenter function is running !');

});

(8):mouseleaver事件：mouseleaver事件是在用户的光标离开元素时触发。

$('p').mouseleaver(function(){

alert('mouseleaver function is running !');

});

(7)和(8)这两个事件一般连起来使用，在jQuery中可以使用hover这个函数来代替这两个函数。

$('p').hover(function(){

alert('mouseenter function is running !');

},function(){

alert('mouseleaver function is running !'); });

篇三：file上传控件onchange事件失效的解决方法

最 近在做项目时，遇到一些用户操作方面的问题，用户想点击input file控件的浏览就直接将文件读取到列表中，我使用StreamReader读取文件时，遇到IO权限的问题，要想读取文件到StreamReader 中必须对该文件享有User可读权限，许多用户的客户端不可能手动设置给这个用户的权限，考虑到安全问题，我只好先上传到服务器端，然后再读取上传后的文 件，这样权限问题就解决了。但是直接点击input file控件就上传，就要使用异步上传了，我在寻找file控件的部分事件时，发现onchange竟然存在这样一个问题，第一次浏览时是可以使用的，再 浏览时onchange也就不激发了，为什么呢，曾经想过onpropertychange这个事件，尝试后依然不激发。

后来我寻找了一个解决方法，就是每点击浏览激活onchange事件一次，就重新初始化一下这个控件，毕竟第一次onchange是可以激发的。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>无标题页</title>

<script language="javascript" type="text/javascript" src="js/jquery.pack.js"></script>

<script language="javascript" type="text/javascript" src="js/ajaxfileupload.js"></script>

<script type="text/javascript">

$(function(){

$("#File1").change(function(){

fileOnchage();

});

});

function fileOnchage()

{

var content = '\

<input id="File1" name="File1" type="file" onchange="fileOnchage();" />\

';

$("#dv").append(content);

$.ajaxFileUpload({

url:'response/Handler.ashx', //需要链接到服务器地址 secureuri:false,

fileElementId:'File1',//文件选择框的id属性 dataType: 'json', //服务器返回的格式，可以是json

success: function (data, status){ //bind(data);

},

error: function (data, status, e)

{

alert(e);

}

});

$("#File1").remove();

}

</script>

</head>

<body>

<form id="form1" method="post" action="" enctype="multipart/form-data"><div id="dv">

<input id="File1" name="File1" type="file" />

</div>

</form>

</body>

</html>

我利用了jquery的remove方法，remove方法只会移除单个元素，所以新添加的会代替原来的继续使用。不知道大家有没有更好的办法。。。

本文来源：https://www.bwwdw.com/article/afsb.html