jquery文本框回车与change事件.docx
《jquery文本框回车与change事件.docx》由会员分享，可在线阅读，更多相关《jquery文本框回车与change事件.docx（9页珍藏版）》请在冰豆网上搜索。
jquery文本框回车与change事件
jquery,文本框回车与change事件
篇一:
利用Jquery实现键盘按键监听
Js代码
1.//showsagivenelementandhidesallothers
2.functionshowViaKeypress（element_id）
3.{
4.$（.container）.css（display,none
5.$（element_id）.slideDown（slow
6.}
7.
8.//showsproperDIVdependingonlinkhref
9.functionshowViaLink（array）
_.{
_.array.each（function（i）
_.{
_.$（this）.click（function（）
_.{
_.vartarget=$（this）.attr（href
_.$（.container）.css（display,none
_.$（target）.slideDown（slow
_.}）;
_.}）;
_.}
而对键盘按键的监听是用的keypress（）方法,其实也没什么难度,不过我们很少在页面上使用按键监听,这个例子比较新奇,值得我们参考,如有必要时,可以在项目里用用.
Js代码
1.$（ument）.keypress（function（e）
2.{
3.switch（e.which）
4.{
5.//userpressesthea
6.case97:
showViaKeypress（_home
7.break;
8.
9.//userpressestheskey
_.case_5:
showViaKeypress（_about
_.break;_.
_.//userpressesthedkey
_.case1_:
showViaKeypress（_contact
_.break;
_.
_.//userpressesthefkey
_.case1_:
showViaKeypress（_awards
_.break;
_.
_.//userpressesthegkey
_.case1_:
showViaKeypress（_links
23.}
24.}）;
Jquery监视按键,按下回车键触发某方法
scripttype=te_t/javascript
$（function（）{
$（input:
te_t:
first）.focus（）;//把焦点放在第一个文本框
var$inp=$（input//所有的input元素
$inp.keypress（function（e）{//这里给function一个事件参数命名为e,叫event也行,随意的,e就是IE窗口发生的事件.
varkey=e.which;//e.which是按键的值
if（key==_）{
alert（aaa
}
}）;
}）;
一个奇怪现象:
我拖了一个Login控件,然后给它转化为template,用于自定义开发.
下面的代码中,我捕捉到了文本栏的回车按键,这时我要去触发LoginButton来提交登录信息进行验证,可是我使用$（[id$=LoginButton]）.click（）;只在firefo_上有效,在IE无效,歪打正着的尝试一下$（
[id$=LoginButton]）.focus（）;,这个可以在IE上起效,在IE上focus（）即完成了对焦又执行了点击,不解啊.呵呵_
$inp.keypress（function（event）{
varkey=event.which;
if（key==_）{
$（[id$=LoginButton]）.click（）;//支持firefo_,IE武校//$（input:
last）.focus（）;
$（[id$=LoginButton]）.focus（）;//支持IE,firefo_无效.//以上两句实现既支持IE也支持firefo_
}
}）;
如何防止回车（enter）键提交表单（所有按键对应的值）
如何防止回车（enter）键提交表单,其实很简单,就一句话.if（event.keyCode==_）returnfalse;把这句写在from标签里面就好了.下面介绍下javascript中event.keycode.
keycode8=BackSpaceBackSpace
keycode9=TabTab
keycode_=Clear
keycode_=Enter
keycode_=Shift_L
keycode_=Control_L
keycode_=Alt_L
keycode_=Caps_Lock
keycode27=EscapeEscape
keycode32=spacespace
keycode33=Prior
keycode34=Ne_t
keycode35=End
keycode36=Home
keycode37=Left
keycode38=Up
keycode39=Right
keycode40=Down
keycode41=Select
keycode42=Print
keycode43=E_ecute
keycode45=Insert
keycode46=Delete
keycode47=Help
keycode48=0equalbracerightkeycode49=1e_clamonesuperiorkeycode50=2quotedbltwosuperiorkeycode51=3sectionthreesuperiorkeycode52=4dollar
keycode53=5percent
keycode54=6ampersand
keycode55=7slashbraceleft
keycode56=8parenleftbracketleftkeycode57=9pareightbracketrightkeycode65=aA
keycode66=bB
keycode67=cC
keycode68=dD
keycode69=eEEuroSign
keycode70=fF
keycode71=gG
keycode72=hH
keycode73=iI
keycode74=jJ
keycode75=kK
keycode76=lL
keycode77=mMmu
keycode78=nN
keycode79=oO
keycode80=pP
keycode82=rR
keycode83=sS
keycode84=tT
keycode85=uU
keycode86=vV
keycode87=wW
keycode88=__
keycode89=yY
keycode90=zZ
keycode96=KP_0KP_0
keycode97=KP_1KP_1
keycode98=KP_2KP_2
keycode99=KP_3KP_3
keycode1_=KP_4KP_4
keycode1_=KP_5KP_5
keycode1_=KP_6KP_6
keycode1_=KP_7KP_7
keycode1_=KP_8KP_8
keycode1_=KP_9KP_9
keycode1_=KP_MultiplyKP_Multiplykeycode1_=KP_AddKP_Add
keycode1_=KP_SeparatorKP_Separatorkeycode1_=KP_SubtractKP_Subtractkeycode1_=KP_DecimalKP_Decimalkeycode_1=KP_DivideKP_Dividekeycode_2=F1
keycode_3=F2
keycode_4=F3
keycode_5=F4
keycode_6=F5
keycode_7=F6
keycode_8=F7
keycode_9=F8
keycode_0=F9
keycode_1=F_
keycode_2=F_
keycode_3=F_
keycode_4=F_
keycode_5=F_
keycode_6=F_
keycode_7=F_
keycode_8=F_
keycode_9=F_
篇二:
jquery笔记（6）jQuery事件之鼠标事件
jQuery事件之鼠标事件
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的.
（1）:
click事件:
click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发.
$（p）.click（function（）{
alert（clickfunctionisrunning!
}）;
（2）:
dbclick事件:
dbclick事件在用户完成迅速连续的两次点击之后触发,双击的速度取决于操作系统的设置.一般双击事件在页面中不经常使用.
$（p）.dbclick（function（）{
alert（dbclickfunctionisrunning!
}）;
（3）:
mousedown事件:
mousedown事件在用户敲击鼠标键时触发,跟keydown事件不一样,该事件仅在按下鼠标时触发.
$（p）.mousedown（function（）{
alert（mousedownfunctionisrunning!
}）;
（4）:
mouseup事件:
mouseup事件在用户松开鼠标时触发,如果在与按下鼠标的元素相同元素上松开,那么click事件也会触发.$（p）.mouseup（function（）{
alert（mouseupfunctionisrunning!
}）.click（function（）{
alert（clickfunctionisrunningtoo!
}）;
（5）:
mouseover事件:
mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发,如果需要知道来自那个元素可以使用,relatedTagrget属性.
（6）:
mouseout事件:
mouseout事件于用户把鼠标移出一个元素时触发,这包括从父元素移动到子元素上,或者使用键盘跳到元素上.
（5）和（6）这两个事件一般不常用,很难实现与用户的交互,也就是说不易捕获用户事件.
（7）:
mouseenter事件:
mouseenter事件是在用户光标进入元素上时触发.
$（p）.mouseenter（function（）{
alert（mouseenterfunctionisrunning!
}）;
（8）:
mouseleaver事件:
mouseleaver事件是在用户的光标离开元素时触发.
$（p）.mouseleaver（function（）{
alert（mouseleaverfunctionisrunning!
}）;
（7）和（8）这两个事件一般连起来使用,在jQuery中可以使用hover这个函数来代替这两个函数.
$（p）.hover（function（）{
alert（mouseenterfunctionisrunning!
},function（）{
alert（mouseleaverfunctionisrunning!
}）;
篇三:
file上传控件onchange事件失效的解决方法
最近在做项目时,遇到一些用户操作方面的问题,用户想点击inputfile控件的浏览就直接将文件读取到列表中,我使用StreamReader读取文件时,遇到IO权限的问题,要想读取文件到StreamReader中必须对该文件享有User可读权限,许多用户的客户端不可能手动设置给这个用户的权限,考虑到安全问题,我只好先上传到服务器端,然后再读取上传后的文件,这样权限问题就解决了.但是直接点击inputfile控件就上传,就要使用异步上传了,我在寻找file控件的部分事件时,发现onchange竟然存在这样一个问题,第一次浏览时是可以使用的,再浏览时onchange也就不激发了,为什么呢,曾经想过onpropertychange这个事件,尝试后依然不激发.
后来我寻找了一个解决方法,就是每点击浏览激活onchange事件一次,就重新初始化一下这个控件,毕竟第一次onchange是可以激发的.代码如下:
!
DOCTYPEhtmlPUBLIC-//W3C//DTD_HTML1.0Transitional//ENhttp:
//www.w3.org/TR/_html1/DTD/_html1-transitional.dtd
html_mlns=http:
//www.w3.org/_99/_html
headrunat=server
title无标题页/title
scriptlanguage=javascripttype=te_t/javascriptsrc=js/jquery.pack.js/script
scriptlanguage=javascripttype=te_t/javascriptsrc=js/aja_fileupload.js/script
scripttype=te_t/javascript
$（function（）{
$（_File1）.change（function（）{
fileOnchage（）;
}）;
}）;
functionfileOnchage（）
{
varcontent=\
inputid=File1name=File1type=fileonchange=fileOnchage（）;/\
$（_dv）.append（content）;
$.aja_FileUpload（{
url:
response/Handler.ash_,//需要链接到服务器地址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
formid=form1method=postaction=enctype=multipart/form-datadivid=dv
inputid=File1name=File1type=file/
/div
/form
/body
/html
我利用了jquery的remove方法,remove方法只会移除单个元素,所以新添加的会代替原来的继续使用.不知道大家有没有更好的办法...
升级会员 