下面是开发中用bootstrap制作的一个搜索框，以及给搜索框添加回车搜索事件的一个小案例。

　　

　　bootstrap制作搜索框及添加回车搜索事件

　　　　下面是功能实现的代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>bootstrap制作搜索框及添加回车搜索事件</title>

         <link rel="stylesheet" type="text/css" href="../trd/bootstrap/css/bootstrap.min.css"/>

         <script type="text/javascript" src="../trd/jquery/jquery-1.11.2.js"></script>

         <script type="text/javascript" src="../trd/bootstrap/js/bootstrap.min.js"></script>

     </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 class="col-sm-4">

         <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>

     </body>

 </html>

　　在上面的代码中有几点需要注意的：

　　1、由于bootstrap依赖于jquery,所以在引入bootstrap.min.js之前要先引入jquery.js

　　2、bootstap.min.css也是需要引入的

　　

bootstrap制作搜索框及添加回车搜索事件的更多相关文章

  1. 使用jQuery和CSS3生成的搜索框变形全屏搜索效果

    在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!

  2. js给页面添加回车监测事件，实现回车登录功能

    document.body.addEventListener('keyup', function (e) { ') { $("#btn_login").click(); } }) ...

  3. js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用

    做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github ...

  4. 搜索框中“请输入搜索keyword”

    $(function(){    $("#ctl00_txtKey").val("请输入搜索keyword").addClass("search&qu ...

  5. vue-- 利用过滤-实现搜索框的姓名的搜索

    <div class="fl w-200 m-l-30"> <el-input placeholder="输入用户名" v-model=&qu ...

  6. bootstrap清除拟态框内添加新HTML再打开时会有缓存现象

    $(function(){ $("#editor").on("hidden.bs.modal",function(){ //清除缓存方法 $(this).fin ...

  7. 谈谈如何给下拉框option添加点击事件？

    我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...

  8. Qt之自定义搜索框

    简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 方案一:调用QLineEdit现有接口 void ...

  9. Android 系统搜索框（有浏览记录）

    实现Android 系统搜索框(有浏览记录),先看下效果: 一.配置搜索描述文件  要在res中的xml文件加创建sreachable.xml,内容如下: <?xml version=" ...

随机推荐

  1. [JavaScript]JS由来

    JavaScript最早由Netscape公司开发 JavaScript的发展历程 我们知道Windows桌面程序是可以交互的,用户可以点击菜单.按钮.下拉列表等控件,并通过消息机制来响应用户操作. ...

  2. protocol

    For every object that can have a delegate, there is a corresponding protocol that declares themessag ...

  3. 十一、Manipulators

    1. Manipulators是可以用三维进行绘制的的节点,可以将用户行为值化,对其他节点的属性进行modify. 2. 属性值可以通过Channel Box 和Graph Editor进行修改.同其 ...

  4. javascript的地基

    有了良好的基础,才能在其上创造有价值的东西. 回顾一下以往自己javascript应用的开发经历,似乎很少去思考和总结js的运行机制.现在我就来整理整理 1. 以<编译原理>的一段话开头: ...

  5. gdb汇编调试

    GDB调试汇编堆栈分析 代码: sudo apt-get install libc6-dev-i386命令安装所需库 进入之后先在main函数处设置一个断点,再run一下,使用disassemble指 ...

  6. 应用Druid监控SQL语句的执行情况

    Druid是什么? Druid首先是一个数据库连接池.Druid是目前最好的数据库连接池,在功能.性能.扩展性方面,都超过其他数据库连接池,包括DBCP.C3P0.BoneCP.Proxool.JBo ...

  7. Hibernate 中出现 users is not mapped 问题 (转)

    今天晚上自己试着用Hibernate去搭建一个Web工程,然后去实现一个简单的登录.         通过Hibernate 做查询操作的时候总是报出这样的错:                    ...

  8. js中各种事件的兼容性

    1给元素绑定一个事件 ie8attachEvent(on+"事件",event); 高级浏览器 addEventListener("事件",event,fals ...

  9. devexpress bandgridview使用总结（14.2）

    这两天利用bandgridview做表头,希望做成如下形状 在制作过程中发现如果想实现动态表头,代码的书写顺序需要稍加注意 实例化gridband 绑定gridband至bandgridview gr ...

  10. .NET （上传的）文件下载

    string strPath = “//UploadFiles/Equipment/QQ截图.png” // 文件有效地址 FileInfo fileInfo = new FileInfo(strPa ...