bootStrap 搜索框

最新推荐文章于 2024-06-04 08:58:47 发布

艳阳天_.

最新推荐文章于 2024-06-04 08:58:47 发布

阅读量6.7k

点赞数 1

分类专栏： # 前端

原文链接：https://www.cnblogs.com/zuidongfeng/p/5530585.html

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

艳阳天_.

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
bootStrap 搜索框

2、<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge"&g...
复制链接

扫一扫

专栏目录