html中车牌号省份简称输入键盘的示例代码

  发布时间:2020-06-19 16:34:08   作者:ALittleShip   我要评论
这篇文章主要介绍了html中车牌号省份简称输入键盘的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

原理是先写出一个按键的div,然后再根据屏幕的大小去自动适应生成键盘,效果如下图:

具体实现代码如下,就不细说了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <script type="text/javascript"  src="../js/jquery-2.1.4.js"></script>
    <style>
        /* *{
            font-family:"黑体";
        } */
        .content{
            width:265px;
            height:353px;
            position:absolute;
            top:50%;
            left:50%;
            height:50%;
            margin:-177px 0 0 -132px;
        }
        .label_province{
            position:absolute;
            top:6px;
            left:10px;
        }
        .input_province{
            position:absolute;
            text-align:center;
            width:26px;
            left:1px;
            top:6px;
            border:none;
            outline:0;  
            font-family:"黑体";       
        }
        .input_font{
            font-size:18px;
            color:#333333;
        }
        .input_font_plate{
            font-size:14px;
            color:#333333;
        }
        .input_platenumber_base{
            position:absolute;
            text-align:center;
            width:34px;
            top:13px;
            border:none;
            outline:0;
        }
        .input_city{
            left:44px;
        }

        .label_platenumber{
            font-size:14px;
            color:#999;
            width:265px;
            text-align:center;
            margin-top:29px;
            border:0;
            outline:0;
        }

        .input_park{
            font-size:14px;
            color:#666;
            width:265px;
            text-align:center;
            border:0;
            outline:0;
        }

            .label_btntext_confirm{
            position:absolute;
            top:12px;
            font-size:16px;
            width:214px;
            left:0;
        }
        .label_btn_text{
            text-align:center;
            color:#FFF;
            /* font-weight:bold; */
        }

        .key_province{
            font-size:17px;
            position:absolute;
            left:2.5px;
            top:8px;
            border:0;
            width:28px;
            text-align:center;
            font-family:"黑体";
        }

    </style>
</head>
<body>
    <div class="content">
        <div style="margin-top:15px;">
            <div style="height:40px;width:100%;position:relative;top:0;">
                <img alt="" src="../img/bg_platenumber.png" width="257" height="40" style="position:relative;left:4px;">
                <label class="label_province" for="id_province">
                    <img alt="" src="../img/border_province.png" width="28.5" height="28.5">
                    <input class="input_province" type="text" readonly="readonly" maxlength="1" id="id_province" onclick="provinceSelect();" value="冀">
                </label>
                <input id="id_city" class="input_platenumber_base input_platenumber_base" style="left:45px;" type="text" onkeyup="value=value.replace(/[^[A-Z]+$/g,'')" maxlength="1">
                <input id="id_plate1" class="input_platenumber_base input_platenumber_base" style="left:81px;" type="text" onkeyup="value=value.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1">
                <input id="id_plate2" class="input_platenumber_base input_platenumber_base" style="left:117px;" type="text" onkeyup="value=value.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1">
                <input id="id_plate3" class="input_platenumber_base input_platenumber_base" style="left:153px;" type="text" onkeyup="value=value.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1">
                <input id="id_plate4" class="input_platenumber_base input_platenumber_base" style="left:189px;" type="text" onkeyup="value=value.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1">
                <input id="id_plate5" class="input_platenumber_base input_platenumber_base" style="left:225px;" type="text" onkeyup="value=value.replace(/[^[A-Z0-9]+$/g,'')" maxlength="1">
            </div>
            <input type="text" readonly="readonly" class="label_platenumber" value="请绑定您的车牌号">
        </div>

        <div style="margin-top:91px;">
            <div>
                <input id="id_park" type="text" readonly="readonly" class="input_park" placeholder="请选择您的停车场" onclick="parkSelect();">
            </div>
            <div>
                <hr  id="username_devision" size=1 color=#ececec style="FILTER: alpha(opacity=100,finishopacity=0);margin-left:22px;margin-right:22px;"/>
            </div>
        </div>
        <div style="margin-top:90px;position:relative;top:0;left:26px;width:214px;">
            <label for="confirm"> 
                <img id="img_confirm" width="214" height="39" alt="" src="../img/bg_btn_enable.png">
            </label>
            <label for="confirm" class="label_btntext_confirm label_btn_text">确定</label>
            <button type="submit" id="confirm" name="button" style="display:none;" onclick="confirm();">确定</button>
        </div>

    </div>
        <div id="id_keyboard_province" style="display:none;">
    </div>


<script type="text/javascript">

    var provinces = new Array("京","沪","浙","苏","粤","鲁","晋","冀",
            "豫","川","渝","辽","吉","黑","皖","鄂",
            "津","贵","云","桂","琼","青","新","藏",
            "蒙","宁","甘","陕","闽","赣","湘");
    function provinceSelect(){
        showProvince(); 
    }
    function parkSelect(){

        alert("选择停车场");
    }
    function confirm(){

        alert("确定");
    }

    function showProvince(){
        var screenWidth=window.screen.width;
        //求出列数,向下取整
        var columns = Math.floor((screenWidth - 9)/42);
        //求出行数,向上取整
        var rows = Math.ceil(31/columns);
        //算出按键背景的高度,为每个按键的高度+间隔+上下边距,48为每个按键的高度+距下一个按键的距离
        var key_bg_height= rows*48+16;
        var x_space = (screenWidth - 9 - 42*columns)/(columns);
        var start_x = 9+x_space;
        var start_y = 12;
        var keyboard_province = document.getElementById("id_keyboard_province");
        keyboard_province.style.position="fixed";
        keyboard_province.style.top= (window.screen.height-key_bg_height)+"px";
        keyboard_province.style.left=0;
        keyboard_province.style.backgroundColor="#f2f2f2";
        keyboard_province.style.width="100%";
        keyboard_province.style.height=key_bg_height+"px";
        //keyboard_province.style.display="block";
        keyboard_province.innerHTML = '';

        for(var i=0;i<rows;i++){
            for(var j=0;j<columns;j++){
                var provinceIds = i*columns+j;
                if(provinceIds<provinces.length){
                    var x = 9+(j+1)*x_space+j*42;
                    var y = 12+i*48;
                    /* var addHtml = addKeyProvince(x,y,provinceIds);
                    alert(addHtml); */
                    $("#id_keyboard_province").append(addKeyProvince(x,y,provinceIds));
                } 
                else{
                    keyboard_province.style.display="block";
                    return;
                }
            }
        } 


    }

    function addKeyProvince(x,y,provinceIds){

        var addHtml = '<div style="position:absolute;left:'+x+'px;top:'+y+'px;width:42px;height:48px;">';
            addHtml += '<label for="id_'+provinceIds+'"><img alt="" width="34" height="38" src="../img/bg_key_province.png"></label>';
            addHtml += '<input id="id_'+provinceIds+'" type="text" readonly="readonly" class="key_province" value="'+provinces[provinceIds]+'" onclick="chooseProvince(this.value);">';
            addHtml += '</div>';
            return addHtml;
    }


    function chooseProvince(province){
        /* alert(province+"======"+provinces[7]); */
        document.getElementById("id_province").value=province;
        $("#id_keyboard_province").hide();
    }
</script>
</body>
</html>

到此这篇关于html中车牌号省份简称输入键盘的示例代码的文章就介绍到这了,更多相关html车牌号输入键盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

  • Html5页面上如何禁止手机虚拟键盘弹出

    这篇文章主要介绍了Html5页面上如何禁止手机虚拟键盘弹出,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
    2020-03-19
  • html5手机键盘弹出收起的处理

    这篇文章主要介绍了html5手机键盘弹出收起的处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习
    2020-01-20
  • html5移动端价格输入键盘的实现

    这篇文章主要介绍了html5移动端价格输入键盘的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习
    2019-09-16
  • 可能这些是你想要的H5软键盘兼容方案(小结)

    这篇文章主要介绍了可能这些是你想要的H5软键盘兼容方案(小结),获知软键盘的弹起还是收起状态很重要,后面的兼容处理都要以此为前提,具有一定的参考价值,感兴趣的小伙伴
    2019-04-23
  • HTML5 虚拟键盘出现挡住输入框的解决办法

    本文主要介绍了HTML5 虚拟键盘出现挡住输入框的解决办法。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-14
  • 利用HTML5 Canvas制作键盘及鼠标动画的实例分享

    这篇文章主要介绍了利用HTML5 Canvas制作键盘及鼠标动画的实例,文中分别分享了一个键盘控制的小球移动和鼠标触发的小丑小脸例子,需要的朋友可以参考下
    2016-03-15
  • HTML5 Canvas鼠标与键盘事件demo示例

    本文的主要母的是演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件通过键盘控制Canvas上对象移动,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-07-04

最新评论