H5车牌号输入键盘

最新推荐文章于 2024-10-11 07:17:38 发布
最新推荐文章于 2024-10-11 07:17:38 发布
阅读量1w 收藏 15
点赞数 3
文章标签： H5 车牌号 键盘

效果图

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
        <meta name="format-detection" content="telephone=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="stylesheet" type="text/css" href="css/estOrg.css">
        <script src="js/jQuery.1.10.1.min.js" type="text/javascript"></script>
        <style>
            body{
                background: #FFFFFF;
            }
            ul,ol{
                list-style: none;
            }
            *{
                padding: 0;
                margin: 0;
            }
            #container{
                width: 100%;
                height: 100%;
                padding-top: 50px;
            }
            #carLicenseBox{
                width: 80%;
                /*height: 100%;*/
                border-radius: 10px;
                margin: 0 auto;
                padding-bottom: 20px;
                overflow: hidden;
                background-color: #ffffff;
            }
            #carLicenseBox .carLicenseTitle{
                width: 100%;
                height: 70px;
                background-color: #fff;
                text-align: center;
                line-height: 70px;
                color: black;
                font-size: 18px;
            }
            #carLicenseBox .carLicenseMain{
                width: 100%;
                height: 160px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
            #carLicenseBox .carLicenseMain ul{
                width: 100%;
                height: 36px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
            }
            #carLicenseBox .carLicenseMain ul li{
                width: 34px;
                height: 40px;
                border: 1px solid #cccccc;
                text-align: center;
                line-height: 40px;
                float: left;
            }
            #carLicenseBox .carLicenseMain ul li:last-of-type{
                margin: 0;
            }
            #carLicenseBox .carLicenseMain ul li.active{
                border: 2px solid #f3483e;
            }
            #carLicenseBox .carLicenseMain ul li.xinnengyuan{
                background: url(img/xinnengyuan.png) no-repeat center;
                background-size: 100% 100%;
                border: 2px dashed #CCCCCC;
            }
            #carLicenseBox .submitBtn{
                width: 80%;
                height: 45px;
                background-color: #f3483e;
                border: none;
                border-radius: 6px;
                text-align: center;
                line-height: 45px;
                color: white;
                font-size: 20px;
                margin-left: 10%;
            }
            #keyboardBox{
                width: 100%;
                position: absolute;
                bottom: 0px;
                left: 0px;
                z-index: 999;
            }
            #keyboardBox .provienceBox,#keyboardBox .textBox{
                width: 100%;
                background-color: #D0D5D9;
                padding-top: 10px;
                padding-bottom: 4px;
            }
            #keyboardBox .provienceBox ul,#keyboardBox .textBox ul{
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                margin-top: 10px;
            }
            #keyboardBox .provienceBox ul:first-of-type, #keyboardBox .textBox ul:first-of-type{
                margin-top: 0px;
            }
            #keyboardBox .provienceBox ul li,#keyboardBox .textBox ul li{
                width: 30px;
                height: 43px;
                border-radius: 6px;
                text-align: center;
                line-height: 43px;
                float: left;
                background-color: #ffffff;
            }
            #keyboardBox .textBox{
                display: none;
            }
            #keyboardBox .provienceBox ul .changeContentBtn,#keyboardBox .provienceBox ul .deleteBtn,#keyboardBox .textBox ul .changeContentBtn,#keyboardBox .textBox ul .deleteBtn{
                width: 40px;
                height: 40px;
                background-color: #ACB3BB;
                text-align: center;
                line-height: 40px;
            }
            #keyboardBox .provienceBox ul .deleteBtn img,#keyboardBox .textBox ul .deleteBtn img{
                width: 23px;
                height: 16px;
                margin: 0px;
                margin-top: 12px;
            }

            .img-jpg{
                width: 80%;
                margin: 0 auto;
            }
            .img-jpg img{
                width: 100%;
            }
            .textBox ul li:click{
                background: #0088CC;
            }
             @keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
            0%{
                transform: scale(1);  /*开始为原始大小*/
            }
            25%{
                transform: scale(1.3); /*放大1.1倍*/
            }
            50%{
                transform: scale(1.3);
            }
            100%{
                transform: scale(1);
            }
        }
        .activeKey{
            background-color: #ACB3BB !important;
            /*background: #999 !important;*/
            opacity: 0.8;
            color: #fff;
            -webkit-animation-name: scaleDraw; /*关键帧名称*/
            -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
            -webkit-animation-duration: 0.2s; /*动画所花费的时间*/
        }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="carLicenseBox">
                <div class="carLicenseTitle">
                    请输入车牌号
                </div>
                <div class="carLicenseMain">
                    <ul>
                        <li class="active">省</li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li class="xinnengyuan"></li>
                    </ul>
                </div>
                <button class="submitBtn" id="submitBtn">查询</button>
            </div>
            <div class="img-jpg">
                <img src="img/pig.jpg">
            </div>
            <!--键盘-->
            <div id="keyboardBox">
                <div class="provienceBox" id="provienceBox">
                    <ul>
                        <li>京</li>
                        <li>津</li>
                        <li>渝</li>
                        <li>沪</li>
                        <li>冀</li>
                        <li>晋</li>
                        <li>辽</li>
                        <li>吉</li>
                        <li>黑</li>
                        <li>苏</li>
                    </ul>
                    <ul>
                        <li>浙</li>
                        <li>皖</li>
                        <li>闽</li>
                        <li>赣</li>
                        <li>鲁</li>
                        <li>豫</li>
                        <li>鄂</li>
                        <li>湘</li>
                        <li>粤</li>
                        <li>琼</li>
                    </ul>
                    <ul>
                        <li>川</li>
                        <li>贵</li>
                        <li>云</li>
                        <li>陕</li>
                        <li>甘</li>
                        <li>青</li>
                        <li>蒙</li>
                        <li>桂</li>
                        <li>宁</li>
                        <li>新</li>
                    </ul>
                    <ul>
                        <li class="changeContentBtn other">ABC</li>
                        <li>藏</li>
                        <li>使</li>
                        <li>领</li>
                        <li>警</li>
                        <li>学</li>
                        <li>港</li>
                        <li>澳</li>
                        <li class="deleteBtn other">删除</li>
                    </ul>
                </div>
                <div class="textBox" id="textBox">
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>0</li>
                    </ul>
                    <ul>
                        <li>Q</li>
                        <li>W</li>
                        <li>E</li>
                        <li>R</li>
                        <li>T</li>
                        <li>Y</li>
                        <li>U</li>
                        <li>I</li>
                        <li>O</li>
                        <li>P</li>
                    </ul>
                    <ul>
                        <li>A</li>
                        <li>S</li>
                        <li>D</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                    </ul>
                    <ul>
                        <li class="changeContentBtn other">返回</li>
                        <li>Z</li>
                        <li>X</li>
                        <li>C</li>
                        <li>V</li>
                        <li>B</li>
                        <li>N</li>
                        <li>M</li>
                        <li class="deleteBtn other">删除</li>
                    </ul>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function() {
                //键盘隐藏，点击触发显示
                $("#keyboardBox").hide()
                $(".carLicenseMain").on("click",function(){
                    $("#keyboardBox").show()
                })
                //键盘点击动画
                $(".textBox ul li").each(function(){
                    $(this).click(function(){
                        $(this).addClass("activeKey")//添加动画效果
                        $(this).siblings().removeClass("activeKey")//移除动画效果
                        var interval=setTimeout(function(){//定时器及时清除自身动画效果
                            $(this).removeClass("activeKey")
                            window.clearInterval(interval)
                        }.bind(this),200);
                    })
                })
                var num = 6;//需要输入的车牌数
                //切换键盘
                $('.changeContentBtn').click(function(){
                    $('li').siblings().removeClass("activeKey")
                    if($(this).html()=='ABC'){
                        $('#textBox').show();
                        $('#provienceBox').hide();
                    }else{
                        $('#textBox').hide();
                        $('#provienceBox').show();
                    }
                })
                //新能源点击事件
                $('.xinnengyuan').click(function(){
                    num = 7;
                    $(this).removeClass('xinnengyuan');
                })
                //获取当前车牌数字索引
                function getIndex(){
                    var index = 0;
                    $('.carLicenseMain ul li').each(function(){
                        var reg = new RegExp('active');
                        if(reg.test($(this).attr('class'))){
                            index = $(this).index();
                        }
                    })
                    return index;
                }
                //自定义键盘处理函数
                function keyboard(num,self){
                    var index = getIndex();
                    if(index<=num){
                        if(index == num){
                            $('.carLicenseMain ul li.active').html($(self).html());
                        }else{
                            $('.carLicenseMain ul li.active').html($(self).html()).removeClass('active').next().addClass('active');
                        }
                        $('#textBox').show();
                        $('#provienceBox').hide();
                    }
                }
                //省份键盘点击事件
                $('#provienceBox ul li:not(.other)').click(function(){
                    $(this).addClass("activeKey")//添加动画效果
                    $(this).siblings().removeClass("activeKey")//移除动画效果
                    var interval=setTimeout(function(){//定时器及时清除自身动画效果
                        $(this).removeClass("activeKey")
                        var self = this;
                        keyboard(num,self);
                        window.clearInterval(interval)
                    }.bind(this),200);
                    //省份点击后键盘切换
                    //var self = this;
                    //keyboard(num,self);
                })
                //文本键盘点击事件
                $('#textBox ul li:not(.other)').click(function(){
                    var self = this;
                    keyboard(num,self);
                })
                //回退按钮点击事件
                $('.deleteBtn').click(function(){
                    var index = getIndex();
                    if(index == num){
                        if($('.carLicenseMain ul li.active').html() != ''){
                            $('.carLicenseMain ul li.active').html('');
                        }else{
                            if(index == 7){
                                $('.carLicenseMain ul li:last-of-type').addClass('xinnengyuan');
                                num = 6;
                            }
                            $('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html('');
                        }
                    }else if(index < num && index > 1){
                        $('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html('');
                    }else if(index == 1){
                        $('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html('省');
                    }
                })
                //提交按钮点击事件
                $('#submitBtn').click(function(){
                    var carNum=""
                    $(".carLicenseMain ul li").each(function(index){
                        carNum+=$(this).html()
                    })
                    alert(carNum)
                })
            })
        </script>
    </body>
</html>

qq_38657283
关注
Vue H5 前端自定义车牌号输入键盘(支持新能源)
Hubery96的博客
08-12 3065
这个项目是基于 vue2+vant 写的录入车牌的键盘, 有需要的伙伴可以参考一下;
h5车牌号输入键盘
weixin_30555753的博客
09-20 1982
自己更换jQuery文件路径 1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=1.0...
车牌输入软键盘
08-23
对停车系统，微信支付或支付宝支付，输入车牌，自动弹出软键盘
html汽车车牌输入插件
11-08
自己手写的html汽车车牌输入插件，可区分普通汽车与新能源汽车
停车王车牌号码专用键盘 - Vue.js 项目教程
最新发布
gitblog_00233的博客
10-11 353
停车王车牌号码专用键盘 - Vue.js 项目教程 vehicle-keyboard-js 停车王车牌号码专用键盘 - 基于vue.js 项目地址: https://gitcode.com/gh_mirrors/ve/vehic...
vue h5 车牌键盘 输入插件
S_m_r的博客
03-24 4279
接下来带大家用一个键盘输入车牌号的的使用 看下效果图 首先在compoents里引入写好的插件 <template> <view class="keyboard-wrap" v-if="kbShow"> <view class="head"> <view class="done" @tap="done"> 完成 <text class="iconfont iconxiala-"></text> </v
JS自定义手机端H5键盘
weixin_30877227的博客
12-12 835
在输入车牌号的时候，因为很多车牌号都是数字字母混合排列的，所以如果用输入法输入就需要频繁切换数字跟字母，有点麻烦。 在这里我们就用自定义一个弹出框代替键盘来使用。 1、首先，要禁止掉文本框弹出输入法，这里我用readonly <input class="selectCarBtn" readonly="readonly" type="text" placeholder="输入车牌...
vue H5输入车牌号格子化和自制弹出键盘
zengdaoqiang的博客
01-18 704
【代码】vue H5输入车牌号格子化和自制弹出键盘。
html+js+css车牌号输入法
09-06
html+js+css车牌号输入法，不需要添加太多代码，直接引入css和js就可以使用
html语言中写汽车之家,html中车牌号省份简称输入键盘的示例代码
weixin_42318708的博客
06-01 378
原理是先写出一个按键的div,然后再根据屏幕的大小去自动适应生成键盘，效果如下图：具体实现代码如下，就不细说了。/* *{font-family:"黑体";} */.content{width:265px;height:353px;position:absolute;top:50%;left:50%;height:50%;margin:-177px 0 0 -132px;}.label_provi...
jQuery手机端输入框键盘键入车牌号码特效源码
08-03
jQuery手机端输入框键盘键入车牌号码特效源码
vue车牌号输入键盘.zip
08-13
vue项目中的输入车牌号，支持中间的车牌号随意更改，支持新能源汽车。样式更改比较简单，将键盘封装成组件，引入到项目中就行，图片放img 里了，路径需要自己调整。
自定义键盘和车牌号输入框
11-10
自定义键盘和车牌号输入框
车牌号和密码输入
06-12
1.自定义keyboard输入车牌号和密码，含jar包。 2. 自定义车牌号和密码输入，可以实现港，澳，警，学，挂，等车的输入 3.自定义密码输入，简单明了
JS脚本键盘自动识别输入是否是正确车牌。新能源车牌要加代码和改一下输入长度
12-08
脚本弹出键盘，可用于车辆车牌输入！在汽车行业车牌验证，但是新能源车牌验证未接入。
jQuery键盘输入车牌号代码
09-07
自定义屏幕键盘，智能输入车牌，车牌已经定义好，方便快捷
vue 车牌号输入专用键盘
04-19
在这个项目中，它可能会解释如何将这个车牌号输入键盘组件集成到Vue项目中，包括引入依赖、注册组件、以及如何在模板中使用这个组件。此外，还可能提供了一些示例代码来展示组件的自定义插槽和只读模式的用法。 `...
手工js制作车牌输入键盘
06-06
为实现公司不同需求，制作一款车牌号输入键盘
uniapp车牌输入 uni-plate-input-master_uniapp_uniapp车牌号_uniapp车牌输入_un
10-04
在本文中，我们将深入探讨如何在uni-app框架中实现车牌号输入功能，主要基于提供的标题“uniapp车牌输入 uni-plate-input-master_uniapp_uniapp车牌号_uniapp车牌输入_un”以及描述“uniapp中使用的车牌输入控件，弹...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值