Develop mobile web Apps using the search button with the phone's own keyboard

Source: Internet
Author: User

Many times in the mobile Web page, need to use the search function, but there is not much space on the page to place a search button like the PC side, this time need to borrow the phone input method comes with the search button to achieve click Search

Although not a big function, but it is very practical, the effect of the implementation of two points

1. Click the input element and the lower right corner of the keyboard appears as "Search"

2. When you click Search, you can start the JS event on the departure page

The code is as follows

1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4     <MetaCharSet= "UTF-8">5     <title>Document</title>6     <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">7     <Scriptsrc= "//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></Script>8 </Head>9 <Body>Ten     <formID= "MyForm"Action=""onsubmit= "return false;"> One     <inputID= "Myinput"type= "Search"> A     </form> - </Body> - <Script> the //Both can be used, one is on the form plus ID one is the INPUT element plus ID - //adding a FORM element to an Apple phone is necessary, otherwise it can only function but the keyboard text cannot be turned into a search word . - //$ (' #myform '). Bind (' Search ', function () { - ////coding + //alert (1); - //  }); +     $('#myinput'). Bind ('Search', function () { A         //Coding at Alert (1); -     }); - </Script> - </HTML>    

Develop mobile web Apps using the search button with the phone's own keyboard

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.