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>