jsp中如何實(shí)現(xiàn)按下回車(chē)鍵自動(dòng)提交表單
為了省事很多時(shí)候希望可以按回車(chē)鍵來(lái)提交表單,要控制這些行為,可以借助JS來(lái)達(dá)到要求。
代碼如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../../common/include_tag.jsp"%>
<%@ include file="../../common/page_var.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><%=pageTitle%>-用戶(hù)登錄</title>
<%@ include file="../../common/page_head.jsp"%>
<link rel="stylesheet" type="text/css"
href="<s:url value='/css/common_green.css'/>" />
<script type="text/javascript" src="<s:url value='/js/jquery.min.js'/>"></script>
<script type="text/javascript" src="<s:url value='/js/common.js'/>"></script>
<style type="text/css">
.logo{
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
font-size: 28px;
}
.top{
padding-bottom: 100px;
}
.login{
line-height: 32px;
}
.content {
width: 350px;
margin: 15px auto auto;
padding: 50px 50px;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 30px #ccc;
}
.bottom{
padding-top: 100px;
}
.button{
margin-top: 10px;
margin-left: 105px;
}
.update {
margin: 0 auto;
padding: 0;
width: 98%;
}
.update td {
margin: 0;
height: 30px;
padding: 5px;
}
.update .name {
text-align: right;
}
.title_div {
width: 350px;
}
body {
background: url("< s : url value = '/images/gray_bg.png'/ >") 0 0
repeat-y #F6F6F6;
}
</style>
<script type="text/javascript">
$(function() {
pilicat.title2div('title2div');
pilicat.keysubmit('form1', 'submit', true);
});
</script>
</head>
<body>
<div class="logo">首都機(jī)場(chǎng)空地自動(dòng)化協(xié)同決策系統(tǒng)</div>
<div class="rounded table">
<div class="top"></div>
<div class="content">
<form id="form1" action="<s:url value='/u/ulogin'/>" method="post">
<div align="center"><span style="color: red;">${captcha}</span></div>
<table class="table table-bordered table-striped" style="width: 310px; padding-left: 50px;">
<tbody>
<tr class="login">
<td><span>賬 號(hào): </span></td>
<td><input type="text" id="userName" name="userName"
class="input rounded" value="" placeholder="賬號(hào)" /></td>
</tr>
<tr class="login">
<td><span>密 碼: </span></td>
<td><input type="password" id="passWd" name="passWd"
class="input rounded" value="" placeholder="密碼" /></td>
</tr>
<tr class="login">
<td><span>驗(yàn)證碼: </span></td>
<td><input type="text" id="captcha" name="captcha" size="5" maxlength="5" class="input rounded" value="" placeholder="驗(yàn)證碼" />
<img id="captcha" style="cursor: pointer; cursor: hand; margin-top: -5px; margin-right: -10px;" align="middle"
onclick="this.src='<s:url value='/u/captcha.htm'/>?'+Math.random();"
src="<s:url value='/u/captcha.htm'/>">
</td>
</tr>
<tr class="login">
<td colspan="2">
<a id="submit" class="submit" href="javascript:;" onclick="submitForm();">登錄</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="bottom"></div>
</div>
<%@ include file="../../common/bottom.jsp"%>
</body>
</html>
解決方案:
把form表單放在一個(gè)div里面 ,然后對(duì)這個(gè)div監(jiān)聽(tīng)事件$("#id").keydown(function (){});
#*#監(jiān)聽(tīng)回車(chē)事件
document.onkeydown=function() {
if(event.keyCode==13) {
//這里提交你的表單
$('#ff_login').submit();
}
}
#*#頁(yè)面編寫(xiě)js腳本進(jìn)行監(jiān)聽(tīng)。。。
#*#js監(jiān)聽(tīng)enter事件#*#
把form表單放在一個(gè)div里面 ,然后對(duì)這個(gè)div監(jiān)聽(tīng)事件$("#id").keydown(function (){});
#*#獲取焦點(diǎn) 監(jiān)聽(tīng)enter#*#
監(jiān)聽(tīng)整個(gè)body的keypress事件,如果是回車(chē)鍵,激發(fā)submit按鈕的click事件,當(dāng)然你的click事件中會(huì)有相關(guān)的數(shù)據(jù)驗(yàn)證之類(lèi)的,如果驗(yàn)證不過(guò),不會(huì)提交。
希望本文所述對(duì)大家jsp程序設(shè)計(jì)有所幫助。
相關(guān)文章
JAVA POST與GET數(shù)據(jù)傳遞時(shí)中文亂碼問(wèn)題解決方法
最近亂忙活弄了一個(gè)企業(yè)家宣傳網(wǎng)站遇到了中文字符集亂碼問(wèn)題,在此分享一下即簡(jiǎn)單又實(shí)用的解決方法,感興趣的朋友可以參考下哈2013-06-06
Tomcat配置https并訪(fǎng)問(wèn)http自動(dòng)跳轉(zhuǎn)至https
這篇文章主要介紹了Tomcat配置https并訪(fǎng)問(wèn)http自動(dòng)跳轉(zhuǎn)至https的相關(guān)資料,需要的朋友可以參考下2017-06-06
Jsp+Servlet實(shí)現(xiàn)簡(jiǎn)單登錄注冊(cè)查詢(xún)
這篇文章主要介紹了Jsp+Servlet實(shí)現(xiàn)簡(jiǎn)單登錄注冊(cè)查詢(xún),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09
詳解Spring Hibernate連接oracle數(shù)據(jù)庫(kù)的配置
這篇文章主要介紹了詳解Spring Hibernate連接oracle數(shù)據(jù)庫(kù)的配置的相關(guān)資料,需要的朋友可以參考下2017-06-06
jsp項(xiàng)目中更改tomcat的默認(rèn)index.jsp訪(fǎng)問(wèn)路徑的方法
如何更改tomcat的默認(rèn)index.jsp訪(fǎng)問(wèn)路徑,jsp的工程下有一個(gè)叫做WEB-INF文件夾下的web.xml打開(kāi)它,按照下面的方法即可修改2013-11-11

