網(wǎng)站開發(fā)中經(jīng)常會(huì)用到鼠標(biāo)或鍵盤事件，實(shí)現(xiàn)表單提交，獲取用戶輸入值等功能，由于瀏覽器的不同，對回車的默認(rèn)功能不盡相同。
在form表單中，往往需要輸入多個(gè)input值，如果某個(gè)input值為空則不能提交表單（必填項(xiàng)），按下回車會(huì)自動(dòng)提交表單，有些時(shí)候并不需要提交表單，只是驗(yàn)證輸入值是否正確。
做這些開發(fā)是為了提高用戶體驗(yàn)，用戶習(xí)慣按TAB健進(jìn)行input之間的切換，按回車提交表單。筆者也是慢慢摸索著不斷學(xué)習(xí)，經(jīng)實(shí)戰(zhàn)總結(jié)出來。
onclick點(diǎn)擊獲取input值方法
JS部分
<script src="jquery.min.js" language="javascript" type="text/javascript"></script>//引用公共JS
<script type="text/javascript">
var result,input
function record(){
result = document.getElementById("result").innerHTML;
input = document.getElementById("email").value;//email輸入值
document.getElementById("result").innerHTML=input;//獲取input值
}
</script>
HTML部分
<form> <input type="text" class="intxt" id="email" name="email" placeholder="輸入郵箱"/> <p><input type="button" id="zhucenext" class="loginBtn" onclick="record()" value="點(diǎn)擊獲取input值"/></p> <p id="result"></p><!--獲取的值在這里顯示--> </form>
直接點(diǎn)擊<input id="zhucenext"/>按鈕能自動(dòng)獲取里面值，但是有時(shí)候我們會(huì)習(xí)慣用回車，請繼續(xù)看如何實(shí)現(xiàn)增加鍵盤的回車鍵功能。
回車激活按鈕事件獲取input值
這里需要注意的是，一般input放在某個(gè)表單form表單內(nèi)，在某些瀏覽器內(nèi)，直接回車會(huì)自動(dòng)提交表單。比如增加驗(yàn)證碼之后，回車不執(zhí)行提交表單。
回車鍵的鍵值是13，回車事件通用代碼如下：
<input type="text" id="" name="" onkeypress="
if(event.keyCode==13){
zhucenext();//執(zhí)行id為zhucenext的click事件，多個(gè)事件之間用英文的";"隔開
return false;//不執(zhí)行表單提交
}"/>
點(diǎn)擊事件和回車事件完整的應(yīng)用實(shí)例
<!doctype html> <html> <head> <script src="jquery.min.js" language="javascript" type="text/javascript"></script>//引用公共JS <script type="text/javascript"> function record(){ var input=document.getElementById("email").value;//通過id獲取需要驗(yàn)證的(input)表單元素的值 if(input==""){//如果獲取的值為空 alert("請輸入郵箱名");//彈出提示 return false;//返回false } var input2=document.getElementById("vdcode").value;//第二個(gè)需要驗(yàn)證的(input2)元素值，以此類推 if(input2==""){ alert("請輸入驗(yàn)證碼"); return false; } //判斷為空值返回，不為空繼續(xù)執(zhí)行下面 var result=document.getElementById("result").innerHTML; document.getElementById("result").innerHTML=input;//設(shè)置只獲取input（郵箱）的值 //執(zhí)行其他命令直接寫 menuShow('zhuceboxnonne'); } </script> </head> <body> <form method="post" action="new.php" name="form"> <input type="text" class="intxt" id="email" name="email" placeholder="輸入郵箱" onkeypress="if(event.keyCode==13){record();return false;}"/></p><!--驗(yàn)證郵箱是否為空，是否通過回車都不提交表單--> <input type="text" class="intxt" id="vdcode" name="vdcode" placeholder="驗(yàn)證碼" onkeypress="if(event.keyCode==13){record();return false;}"/><!--驗(yàn)證驗(yàn)證碼是否為空，通過后回車執(zhí)行表單提交，否則返回--> <img id="vdimgck" onclick="this.src=this.src+'?'" alt="看不清？點(diǎn)擊更換" src="../include/vdimgck.php"/> <button type="submit" id="login" class="loginBtn" onclick="record()">提交表單</button></p><!--點(diǎn)擊button提交表單，不能return false，否則無法提交表單--> </form> <p id="result"></p><!--獲取的結(jié)果--> </body> </html>
這樣就能實(shí)現(xiàn)一個(gè)回車執(zhí)行多個(gè)input按鈕事件，多個(gè)onkeypress需要用“;”隔開。
