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.com/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.com/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
https://www.cnblogs.com/zuidongfeng/p/5530585.html
