Here is a search box made with bootstrap in development, and a small case for adding a carriage return search event to the search box.
Bootstrap Make search box and add carriage return search event
Here is the code for the feature implementation:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Bootstrap Make search box and add carriage return search event</title>6 7 <Linkrel= "stylesheet"type= "Text/css"href=".. /trd/bootstrap/css/bootstrap.min.css "/>8 9 <Scripttype= "Text/javascript"src=".. /trd/jquery/jquery-1.11.2.js "></Script>Ten <Scripttype= "Text/javascript"src=".. /trd/bootstrap/js/bootstrap.min.js "></Script> One A </Head> - <Body> - <Divclass= "Col-sm-4"> the <Divclass= "Input-group"> - <inputtype= "text"class= "Form-control"onkeydown= "OnKeyDown (event)"/> - <spanclass= "Input-group-addon""><Iclass= "Glyphicon glyphicon-search"></I></span> - </Div> + <Divclass= "Col-sm-4"> - + A <Scripttype= "Text/javascript"> at functionOnKeyDown (event) { - vare=Event||window.event||arguments.callee.caller.arguments[0]; - if(e&&E.keycode== -){ //Press ESC - //the things to do - } - if(e&&E.keycode==113){ //Press F2 in //the things to do - } to if(e&&E.keycode== -){ //Enter key + Alert ("enter here to trigger the search event"); - } the * } $ Panax Notoginseng </Script> - </Body> the </HTML>
There are a few things to note in the code above:
1, because Bootstrap relies on jquery, we should introduce jquery.js before introducing Bootstrap.min.js
2, Bootstap.min.css also need to introduce
Bootstrap Make search box and add carriage return search event
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
