/* container */ #container { margin: 100px auto; width: 488px; } #keyboard { margin: 0; padding: 0; list-style: none; } #keyboard li { float: left; margin: 0 5px 5px 0; width: 40px; height: 40px; line-height: 40px; text-align: center; background: #fff; border: 1px solid #f9f9f9; cursor: pointer; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-size: 20px; } #keyboard li:hover { position: relative; top: 1px; left: 1px; border-color: #e5e5e5; background: #FFF1C2; } #keyboard .delete { width: 180px; font-size: 20px;
JS Code
$ (function () { $ ("#Batchid"). Bind (' Focus ', function () { //Keyboard Display $ ("#container"). Show (); }); //Click $ (". Letter"). Bind (' click ', function () { $ ("#Batchid"). Val ($ ("#Batchid"). Val () + "" + $ (This). html ()); }); //Delete $ ("#delete"). Bind (' click ', function () { var html = $ ("#Batchid"). Val () $ ("#Batchid"). Val (Html.substr (0, html.length - 1)); }); });
Page code
<div style= "margin-left:-30px;" > <div id= "Contact-form" > <table style= "text-align:center;margin:0 auto;" > <tr> <td> The final effect was two hours.
650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7E/A4/wKioL1cGJhzRAFjsAACji4FgIe4159.png "title=" {%KRD % (96u%}owl4z9ojb_8.png "alt=" Wkiol1cgjhzrafjsaacji4fgie4159.png "/>
JS Keypad requirements