下面是开发中用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. Oracle补习班第十天

    Life without love is like a tree without blossoms or fruit. 缺少爱的生活就像从未开花结果的枯树 RMAN备份工具 crosscheck ba ...

  2. policy

    template <class Apolicy> class Host {   Apolicy direct_policy_use;   Apolicy <SomeInternalT ...

  3. java和h5 canvas德州扑克开发中（二）

    德州扑克网页源码在github上分享 https://github.com/lxr1907/pokers 感兴趣的可以上去看下. 1.通讯使用websocket,主要在message.js中. 2.用 ...

  4. eclipse项目debug方法

    属性查看代码在哪里存 本地项目启动 1,2步骤需要success

  5. Android 通过广播获取网络状态

    Android系统网络连接状态的改变会发一个广播,注册一个广播接收者,实时动态的检测网络状态,及时提醒用户,优化用户体验.          本文仅提供WIFI 状态的检测作为参考,其他网络连接方式请 ...

  6. Google Font字体本地化使用提高网站访问速度

    Google Web font在国内经常不稳定,速度在国内延迟也很高,而引发网页打开速度慢. 一.常见的字体格式介绍 不同的浏览器对字体格式支持是不一致的,常见的如下: 1.TureTpe(.ttf) ...

  7. [HDU 4336] Card Collector (状态压缩概率dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4336 题目大意:有n种卡片,需要吃零食收集,打开零食,出现第i种卡片的概率是p[i],也有可能不出现卡 ...

  8. SqlCommand执行带GO的SQL脚本文件

    今天工作中遇到了这个问题,其实只要把GO替换成“;”就行了,其它人写的例子用Split来拆分这一个脚本文件的内容,完全没有必要.希望对你有用.

  9. 标准C++中的string类的用法总结

    标准C++中的string类的用法总结 相信使用过MFC编程的朋友对CString这个类的印象应该非常深刻吧?的确,MFC中的CString类使用起来真的非常的方便好用.但是如果离开了MFC框架,还有 ...

  10. android 调用地图

    有时候我们需要调用地图显示一下位置,这时候可能还需要导航,导航做起来有点麻烦,如果调用第三方的是不是很简单,本文就是写这个来的: 第一种方式:android Intent调用地图应用客户端 调用百度地 ...