外部js文件enterKeySearch.js
var flag=false;
function search(submitButton){
initSearch();
window.onkeyup=function(event){
if(flag&&event.keyCode==13){
submitButton.submit();
}
}
}
function initSearch(){
var $querys = $(".query");
for(var i=0;i<$querys.length;i++){
var $query = $($querys.get(i));
$query.bind({
"focus":function(){
flag=true;
},
"blur":function(){
flag=false;
}
});
}
}
使用方式：
在需要查询的input框或者select上面加上样式class="query"
调用search方法传入要提交的form表单的jquery对象
下面是demo：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" href="../resources/css/bootstrap.css" rel="stylesheet"/>
<script type="text/javascript" src="../resources/js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="../resources/js/bootstrap.js"></script>
<script type="text/javascript" src="../resources/js/enterKeySearch.js"></script>
</head>
<body>
<form id="search" action="${pageContext.request.contextPath }/keypress" method="post">
<table class="table">
<tr>
<td>
告警等级
</td>
<td>
<select name="level" class="query">
<option value="">全部</option>
<option value="1">高?</option>
<option value="2">中</option>
<option value="3">低</option>
</select>
</td>
<td>
告警流水号
</td>
<td>
<input type="text" name="serialNo" class="query"/>
</td>
</tr>
<tr>
<td>?告警标题</td>
<td>
<input type="text" name="title" class="query"/>
</td>
<td>上传时间</td>
<td>
<input type="text" name="uploadTime" class="query"/>
</td>
</tr>
<tr>
<td colspan="4">
<input class="btn btn-primary btn-sm query" type="button" value="查询"/>
<input class="btn btn-primary btn-sm" type="button" onclick="" value="清空"></a>
</td>
</tr>
</table>
</form>
<form action="">
</form>
</body>
<script type="text/javascript">
$(function(){
var $submitButton = $("#search");
search($submitButton);
});
</script>
</html>
时间： 2024-10-08 22:03:43