jsp中实现按下回车键自动提交表单的方法

来源:爱站网时间:2020-11-25编辑:网友分享
为了省时间很多用户们都希望可以按回车键来提交表单,但是你知道要如何才能实现按下回车键自动提交表单吗?下面我们就去看看jsp中实现按下回车键自动提交表单的方法。

为了省时间很多用户们都希望可以按回车键来提交表单,但是你知道要如何才能实现按下回车键自动提交表单吗?下面我们就去看看jsp中实现按下回车键自动提交表单的方法。

要控制这些行为,可以借助JS来达到要求。

代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

<%@ 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%>-用户登录</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">首都机场空地自动化协同决策系统</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>账 号: </span></td>

 <td><input type="text" id="userName" name="userName"

 class="input rounded" value="" placeholder="账号" /></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>验证码: </span></td>

 <td><input type="text" id="captcha" name="captcha" size="5" maxlength="5" class="input rounded" value="" placeholder="验证码" />

 <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表单放在一个div里面 ,然后对这个div监听事件$("#id").keydown(function (){});

#*#监听回车事件

1

2

3

4

5

6

7

8

9

document.onkeydown=function() {

 

if(event.keyCode==13) {

 

//这里提交你的表单

 

$('#ff_login').submit();

}

}

#*#页面编写js脚本进行监听。。。

#*#js监听enter事件#*#

把form表单放在一个div里面 ,然后对这个div监听事件$("#id").keydown(function (){});

#*#获取焦点 监听enter#*#

监听整个body的keypress事件,如果是回车键,激发submit按钮的click事件,当然你的click事件中会有相关的数据验证之类的,如果验证不过,不会提交。

以上就是小编介绍jsp中实现按下回车键自动提交表单的方法,具有一定的参考价值,需要的朋友可以参考一下。

上一篇:jsp Hibernate函数的介绍

下一篇:jsp页面中显示当前时间的实例

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载