2、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--声明文档兼容模式,表示使用IE浏览器的最新模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Responsive layout:响应式布局-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>搜索栏</title>
<!-- 引入Bootstrap核心样式文件 -->
<link href="http://cdn.static.runoob/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="col-sm-4">
<div class="input-group">
<input type="text" class="form-control" onkeydown="onKeyDown(event)"/>
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
</div >
</div>
<script type="text/javascript">
function onKeyDown(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode==27){ // 按 Esc
//要做的事情
}
if(e && e.keyCode==113){ // 按 F2
//要做的事情
}
if(e && e.keyCode==13){ // enter 键
alert("此处回车触发搜索事件");
}
}
</script>
<!-- 引入jQuery核心js文件 -->
<script src="http://cdn.static.runoob/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<script src="http://cdn.static.runoob/libs/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
https://wwwblogs/zuidongfeng/p/5530585.html
更多推荐
bootStrap 搜索框
发布评论