下面是开发中用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. linux socket连接中 ERRNO错误

    Connection refused:应该是连接的服务端没有启动或者连接端口错误,可以用如下代码测试 client端: #include <stdio.h> #include <sy ...

  2. WMSWebServiceExtension 使用，支持压缩

    using System;using System.Collections.Generic;using System.IO.Compression;using System.Diagnostics;u ...

  3. A New Beginning

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

  4. Django 开发投票系统

    主要参考官方文档 Windows  10 Python 23.5 Django 1.9 1.创建项目(mysite)与应用(polls) D:\python>django-admin.py st ...

  5. 【转】Hibernate级联注解CascadeType参数详解

    cascade(级联) 级联在编写触发器时经常用到,触发器的作用是当 主控表信息改变时,用来保证其关联表中数据同步更新.若对触发器来修改或删除关联表相记录,必须要删除对应的关联表信息,否则,会存有脏数 ...

  6. java工作流软件发送邮件的方案

    利用javamail的功能将发送邮件的功能集成到java工作流系统中.javamail包提供有发送邮件的方法,设置发送人地址,收件人地址,抄送,主题,邮件服务器地址,认证用户等信息,再调用javama ...

  7. 初学PHP

    这东西必须得静下心来学,快是快不来的,得有一个痛苦的过程.<PHP和MySQL WEB开发>这本书很值得一看,有了坚实的基础,推荐看<深入php++面向对象.模式与实践+第三版> ...

  8. 新增资产时YTD折旧与累计折旧录入错误如何处理

    如新增资产时YTD折旧与累计折旧录入错误,但资产已入账处理,如何处理: 1.需要先报废资产: 2.需要在总账手工帐冲销未冲抵凭证: 3.重新增加资产,录入资产时YTD折旧及累计折旧金额应为0.  

  9. js的事件的绑定

    js的绑定事件 绑定事件有什么用,当你一个按钮点击时需要执行2个函数,就可以用绑定事件,一般只有没绑定事件增加两个onclick函数,第二会覆盖第一个函数的. <!DOCTYPE html> ...

  10. python:让源码更安全之将py编译成so

    应用场景 Python是一种面向对象的解释型计算机程序设计语言,具有丰富和强大的库,使用其开发产品快速高效. python的解释特性是将py编译为独有的二进制编码pyc文件,然后对pyc中的指令进行解 ...