下面是开发中用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. es6 class

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. nginx响应时间监控脚本

    最近我们服务的使用方总是反应说我们接口超时,于是做了一个监控脚本,统计最近五分钟的响应情况,并对异常情况发送邮件报警. #!/bin/bash function define(){ ori_log_p ...

  3. Linux命令（22）find的使用

    在linux下面工作,有些命令能够大大提高效率. 比如说find命令,他哥俩可以算是必会的linux命令,几乎每天都要用到他们. find命令 find命令的一般形式 find命令的常用选项及实例 f ...

  4. A New Beginning

    不知不觉中,接触前端已经快两个月了,从一开始的懵懂无知,到现在的--依旧不是很懂,似乎浪费了很多时间,一直都有记纸质笔记.写总结的习惯,写满一本又换一本,却在不知不觉中忽略了自己的实践能力,花费了太多 ...

  5. 升级owncloud到7.0.2

    owncloud很久没有提示升级了,官网已经升级到7.0.2,访问Update Center依旧显示是最新.估计是有什么问题导致不能自动更新.想着干脆手动升级试试.找到了两个手动升级的文档: 大版本升 ...

  6. 高级搜索插件solis search在umbraco中的使用

    好久没有写关于umbraco的博客了,这段时间在研究solis search,感觉它太强大,好东西是需要分享的,所以写一篇简单的使用博客分享给个人umbraco爱好者. 简介 在了解solis sea ...

  7. flume整合kafka

    # Please paste flume.conf here. Example: # Sources, channels, and sinks are defined per # agent name ...

  8. [Android]android studio预览视图时报错

    报错信息: 详细报错信息: java.lang.NoSuchMethodError: com.android.ide.common.rendering.api.LayoutlibCallback.ge ...

  9. 基础篇-struts2的搭建

    .---恢复内容开始--- struts的官网是英文版的,不懂怎么下载的话可以跟着我的步骤来做, 首先去struts的官网http://apache.org/下载struts的报jar类包. 往下拉到 ...

  10. Lenovo ThinkPad W520 4282-A76

    processor: Intel Quad Core i7-2630QM (2GHz, 8MB L3, 1333MHz FSB, 45W) graphics adapter: NVIDIA Quadr ...