zoukankan      html  css  js  c++  java
  • 页面软键盘

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <base href="<%=basePath_%>">
        <title></title>
        <meta name="Generator" content="EditPlus">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
        <link href="css/style.css" type="text/css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="ec/css/tab.css">
        <link rel="stylesheet" type="text/css" href="ec/css/basic.css">
        <link rel="stylesheet" type="text/css" href="ec/css/css.css">
        <link rel="stylesheet" type="text/css" href="ec/jsp/carTeamInfo/teamTask/dest/autosearch.css">
        <style type="text/css">
            .car_place_buttom{
                width: 26px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                background-color: #7392A9;
                float: left;
                margin-top: 5px;
                margin-left: 5px;
                font-size: 16px;
                border: 1px solid black;
                cursor: pointer;
                font-weight: bolder;
                -moz-user-select:none;/*火狐*/
                -webkit-user-select:none;/*webkit浏览器*/
                -ms-user-select:none;/*IE10*/
                -khtml-user-select:none;/*早期浏览器*/
                user-select:none;
            }
            .car_place_buttom_E{
                width: 26px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                background-color: #1F6689;
                float: left;
                color:white;
                margin-top: 5px;
                margin-left: 5px;
                font-size: 16px;
                border: 1px solid black;
                cursor: pointer;
                font-weight: bolder;
                -moz-user-select:none;/*火狐*/
                -webkit-user-select:none;/*webkit浏览器*/
                -ms-user-select:none;/*IE10*/
                -khtml-user-select:none;/*早期浏览器*/
                user-select:none;
            }
            .car_place_buttom_N{
                width: 26px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                background-color: #B23AEE;
                float: left;
                color:white;
                margin-top: 5px;
                margin-left: 5px;
                font-size: 16px;
                border: 1px solid black;
                cursor: pointer;
                font-weight: bolder;
                -moz-user-select:none;/*火狐*/
                -webkit-user-select:none;/*webkit浏览器*/
                -ms-user-select:none;/*IE10*/
                -khtml-user-select:none;/*早期浏览器*/
                user-select:none;
            }
        
        </style>
        <script src="ec/jsp/carTeamInfo/teamTask/dest/jquery-1.11.2.js"></script>
        <script src="ec/jsp/carTeamInfo/teamTask/dest/autosearch.js"></script>
    </head>
    <script type="text/javascript">
      $(function(){
          $(".car_place_buttom").click(function(){
              $("#carno").val($("#carno").val()+$(this).html());
          }).hover(
                function () {
                    $(this).css("background-color","#00ff00");
              },
              function () {
                  $(this).css("background-color","#7392A9");
              }
            );
          $(".car_place_buttom_E").click(function(){
              $("#carno").val($("#carno").val()+$(this).html());
          }).hover(
                    function () {
                        $(this).css("background-color","#00ff00");
                  },
                  function () {
                      $(this).css("background-color","#1F6689");
                  }
                );
          $(".car_place_buttom_N").click(function(){
              var hv = $(this).html();
              if(hv == ""){
                  var carnov = $("#carno").val();
                  if(carnov.length > 0){
                      $("#carno").val(carnov.substr(0,carnov.length -1));
                  }
              }else if(hv == "确  认"){
                  addCarDispacherInfo();
              }else if(hv == "清  除"){
                  $("#carno").val("");
              }else{
                  $("#carno").val($("#carno").val()+hv);
              }
              
          }).hover(
                    function () {
                        $(this).css("background-color","#00ff00");
                  },
                  function () {
                      $(this).css("background-color","#B23AEE");
                  }
                );
           
       //模糊查询
       
        var input = $("#carno");
        var autosearch = new AutoSearch();
        autosearch.init({input:input ,autoShow:false,data:function(callback){
               $.get("/query.jsp",{carno:input.val()},function(result){
                       callback(result);
               },'json');
           }
       });
      });
      function swicthKeyboard(obj){
          var keyboardstatues = $(obj).val();
          if(keyboardstatues == "关闭键盘"){
              $(obj).val("打开键盘");
              $("#keyboard").hide();
          }else{
              $(obj).val("关闭键盘");
              $("#keyboard").show();
          }
          
      }
     
    </script>
    <body>
        <div  class="ectbba" style="height: auto;">
        <ul >
            <li>
               <div id="car_dispacher_info_iframe" style=" 250px;border: 0px;float: left;overflow: hidden;">
                <input id="carno" name="carno" type="text" value=""  style="float:left;border: 1px solid blue;" onkeyup="this.value=this.value.toUpperCase();" />
            </div>
               <div style="float: left; 245px;">  
            <input type="button" value="关闭键盘"  onclick="swicthKeyboard(this);">
               </div>
            </li>
        </ul>
           
        </div>
        <div id="keyboard" style=" 300px;height: 302px;background-color: #ADD8E6;position: absolute ;margin-top: 32px;margin-left: 230px;z-index: 999">
            <div style=" 300px;height:132px;">
            <div class="car_place_buttom"></div>      
            <div class="car_place_buttom"></div>      
            <div class="car_place_buttom"></div>      
            <div class="car_place_buttom"></div>      
            <div class="car_place_buttom"></div>      
            <div class="car_place_buttom"></div>      
            <div class="car_place_buttom"></div>      
            <div class="car_place_buttom"></div>      
            <div class="car_place_buttom"></div>      
            <div class="car_place_buttom"></div>      
            <div class="car_place_buttom"></div>      
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            <div class="car_place_buttom"></div>
            </div>
            <div style=" 300px;height:100px;">
            <div class="car_place_buttom_E">A</div>      
            <div class="car_place_buttom_E">B</div>      
            <div class="car_place_buttom_E">C</div>      
            <div class="car_place_buttom_E">D</div>      
            <div class="car_place_buttom_E">E</div>      
            <div class="car_place_buttom_E">F</div>      
            <div class="car_place_buttom_E">G</div>      
            <div class="car_place_buttom_E">H</div>      
            <div class="car_place_buttom_E">J</div>      
            <div class="car_place_buttom_E">K</div>      
            <div class="car_place_buttom_E">L</div>      
            <div class="car_place_buttom_E">M</div>      
            <div class="car_place_buttom_E">N</div>      
            <div class="car_place_buttom_E">O</div>      
            <div class="car_place_buttom_E">P</div>      
            <div class="car_place_buttom_E">Q</div>      
            <div class="car_place_buttom_E">R</div>      
            <div class="car_place_buttom_E">S</div>      
            <div class="car_place_buttom_E">T</div>      
            <div class="car_place_buttom_E">U</div>      
            <div class="car_place_buttom_E">V</div>      
            <div class="car_place_buttom_E">W</div>      
            <div class="car_place_buttom_E">X</div>      
            <div class="car_place_buttom_E">Y</div>      
            <div class="car_place_buttom_E">Z</div>      
             </div>
            <div style=" 300px;height:72px;">
            <div class="car_place_buttom_N">1</div>      
            <div class="car_place_buttom_N">2</div>      
            <div class="car_place_buttom_N">3</div>      
            <div class="car_place_buttom_N">4</div>      
            <div class="car_place_buttom_N">5</div>      
            <div class="car_place_buttom_N">6</div>      
            <div class="car_place_buttom_N">7</div>      
            <div class="car_place_buttom_N">8</div>      
            <div class="car_place_buttom_N">9</div>      
            <div class="car_place_buttom_N">0</div>     
            <div class="car_place_buttom_N" style=" 65px;margin-left: 43px;"></div>
            <div class="car_place_buttom_N" style=" 65px;margin-left: 10px;">确  认</div>     
            <div class="car_place_buttom_N" style=" 65px;margin-left: 10px;">清  除</div>     
             </div>
        </div>
                    
    </body>
    <html>

     jQuery文件等都是需要引入的

  • 相关阅读:
    Linux指令集
    [日记]贝鲁特煎熬第32天
    2019南京区域赛ABCHJK题解 & KMbfs(O(n^3))板子
    欧拉筛质数以及四大积性数论函数(欧拉函数、莫比乌斯函数、约数个数函数、约数和函数)
    简短的自我介绍
    BSTTreap名次树数组&指针实现板子 Ver1.0
    2019银川区域赛BDFGHIKN题解
    安装vs2010
    SPEmailEventReceiver 之导入附件EXCEL
    为incoming mail绑定事件,SPEmailEventReceiver
  • 原文地址:https://www.cnblogs.com/clovem/p/5685443.html
Copyright © 2011-2022 走看看