下面是开发中用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. android 学习第一天 了解事件机制，页面跳转等常用操作

    点击时间2种 第一种,通过初始化页面 写入点击事件 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedI ...

  2. NIO源码阅读

    自己对着源码敲一遍练习,写上注释.发现NIO编程难度好高啊..虽然很复杂,但是NIO编程的有点还是很多: 1.客户端发起的连接操作是异步的,可以通过在多路复用器注册OP_CONNECTION等待后续结 ...

  3. three.js学习笔记

    一.名词解释 scene - 场景 camera - 摄影机 renderer - 渲染器:描绘器 Vector - 三维向量的对象 orthographic - 正射 field of view - ...

  4. 设置树莓派3 B+的静态IP

    修改/etc/dhcpcd.conf 文件 sudo vim /etc/dhcpcd.conf interface eth0 static ip_address= static routers=192 ...

  5. Bugtags 2016-10-17 更新内容

    远程配置功能上线 功能介绍 远程配置可以实现在不发布应用更新的情况下更改应用的行为和外观.举个例子,产品在某个功能正式发布前,可能会采取小流量测试的方式,控制该功能只有某些特定用户可见,那么就可以使用 ...

  6. C#位操作（转）

    在C#中可以对整型运算对象按位进行逻辑运算.按位进行逻辑运算的意义是:依次取被运算对象的每个位,进行逻辑运算,每个位的逻辑运算结果是结果值的每个位.C#支持的位逻辑运算符如表2.9所示. 算符号 意义 ...

  7. parse output

    if ((line = br.readLine()).contains("PID")){ TestResultDTO t = new TestResultDTO(); t.pid ...

  8. 方便的一站式svn/git服务器软件（linux）

    https://www.scm-manager.org/ The easiest way to share and manage your Git, Mercurial and Subversion ...

  9. Thunderbird扩展

    FromToGMAP 1.4 Mail Redirect 0.7.8 MinisizeToTray revived 1.1.2 Nightly Tester Tools 3.7 Thunderbrid ...

  10. jquery 中post 、get的同步问题

    jquery 中post .get的同步问题 解决方法1: 在全局设置: $.ajaxSetup({ async : false }); 然后再使用post或get方法 $.get("reg ...