下面是开发中用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. centos6.3(64位) 安装apr

    安装apr来提高tomcat 的可伸缩性和性能 ? 1 cd /usr/local/ 1  下载apr 和 apr-util最新版 ? 1 2 3 wget  http://apache.fayea. ...

  2. ubuntu下编译protobuf

    参考: http://blog.csdn.net/wuzuyu365/article/details/51900676 1.下载protobuf下载地址:https://github.com/goog ...

  3. 1、NASA Super Cloud Library（SCL）

    Empowering Data Management, Diagnosis, and Visualization of Cloud-Resolving Models (CRM) by Cloud Li ...

  4. pip install tushare

    1.sudo apt-get install libxml2-dev libxslt1-dev python-dev apt-get install libevent-dev pip install ...

  5. html基础 链接

    使用图像来作链接: (链接标签中嵌套图片标签) <html> <body> <p> 您也可以使用图像来作链接: <a href="/example/ ...

  6. 【原创】【2015最新】微信公众平台开发手把手入门之一：缘起微信公众号（PHP，MYSQL, BAE）

    最近因为业务的需要,老板布置做了两个月简单的的微信公众平台开发,从网上搜了一些资料,实话说资料不多. 在参考学习的过程中也遇到了不少难缠的小问题,虽然不难逾越,但是确实浪费了时间. 我发现网上仅有不多 ...

  7. 莫名其妙MyEclipse

    MyEclipse Enterprise Workbench Version: 2015 Stable 2.0Build id: 13.0.0-20150518 整合SS时,\WEB-INF\clas ...

  8. STL容器

    啦啦啦,今天听啦高年级学长讲的STL容器啦,发现有好多东西还是有必要记载的,毕竟学长是身经百战的,他在参加各种比赛的时候积累的经验可不是一天两天就能学来的,那个可是炒鸡有价值的啊,啊啊啊啊啊 #inc ...

  9. Unity3d程序运行的时候在unity3d标志哪里进不去的原因

    我那个去,居然是有两个error..我郁闷了,unity编译器有error居然也能打包能apk.我真是醉了.搞了我几个小时.

  10. 通过Robocopy+DOS 命令+Windows排程实现自动备份(将特定文件/目录备份至自动创建的以年月日命名的目标目录)

    1. Software Requirement: 1.1.mirror.bat .mirror_SERVICE_BEGIN.mirror_SERVICE_END.robocopy.exe 1.2. C ...