在输入车牌号的时候,因为很多车牌号都是数字字母混合排列的,所以如果用输入法输入就需要频繁切换数字跟字母,有点麻烦。

在这里我们就用自定义一个弹出框代替键盘来使用。

1、首先,要禁止掉文本框弹出输入法,这里我用readonly

<input class="selectCarBtn" readonly="readonly" type="text" placeholder="输入车牌号">

2、其次需要一个键盘弹框,这里就用div给做一个,想怎么排列就怎么布局。这里的键盘都是写死的,有需要可以循环出来。

 <div class="popup OpacityUp popup-selectCarBox">
<div class="btn">
<div class="selectCarTit">
<div class="closeSelectCarBox">取消</div>
</div>
<div class="selectCarCon">
<ul class="number">
<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 class="english">
<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>A</li>
<li>S</li>
<li>D</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>J</li>
<li>K</li>
<li>P</li>
<li>Z</li>
<li>X</li>
<li>C</li>
<li>V</li>
<li>B</li>
<li>N</li>
<li>M</li>
<li>L</li>
<li></li>
<li class="key_ok">确定</li>
<li class="delect_back"></li>
</ul>
</div>
</div>
</div>

3、键盘有了,再给它添加点击事件。这里定义一个变量carNum来存放输入的值。

主要是这个回删事件,用 carNum.substr(0, carNum.length - 1)  来得到回删后的值。

 // 自定义键盘事件
$(".selectCarBtn").click(function(){
$.popup(".popup-selectCarBox");
});
$(".closeSelectCarBox").click(function(){
$.closeModal(".popup-selectCarBox");
});
$(".popup-selectCarBox").click(function(e){
$.closeModal(".popup-selectCarBox");
})
$(".selectCarCon").click(function(e){
e.stopPropagation();
})
var carNum = "";
$(".selectCarCon li").not('.delect_back,.key_ok').click(function(){
carNum = carNum + $(this).html();
$(".selectCarBtn").val(carNum);
});
$(".selectCarCon li.delect_back").click(function(){
var num = carNum.substr(0, carNum.length - 1);
$(".selectCarBtn").val(num);
carNum = num;
});
$(".selectCarCon li.key_ok").click(function(){
$.closeModal(".popup-selectCarBox");
});

但是还不够完善,还有一些问题没有解决:

例如:

输入框没有光标了

怎么完善呢???

JS自定义手机端H5键盘的更多相关文章

  1. 移动手机端H5无缝间歇平滑向上滚动js代码

    在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...

  2. vue+node开发手机端h5页面开发遇到的坑

    项目进行中...随时更新 这里记录了一些手机端调试的方式 一 css 1.文字超过span宽度显示...(单行文字) .topWrap .introduce span { padding: 0 17p ...

  3. 【极品代码】一般人我不告诉他,手机端h5播放时不自动全屏代码

    已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽噢,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视 ...

  4. js仿手机端九宫格登录功能

    js仿手机端九宫格登录功能 最近闲来无事把以前无聊时开发的小东西拿出来和大家分享下,写的不好的请指出,我会及时修改.谢谢. 功能及方法逻辑都注释在代码中.所以麻烦大家直接看代码. 效果如下: 话不多说 ...

  5. js判断手机端操作系统(Andorid/IOS)

    非常实用的js判断手机端操作系统(Andorid/IOS),并自动跳转相应下载界面 androidURL = "http://xxx/xxx.apk"; var browser = ...

  6. 70.JS---利用原生js做手机端网页自适应解决方案rem布局

    利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...

  7. js判断手机端

    if (window.location.toString().indexOf('pref=padindex') != -1) { } else { if (/AppleWebKit.*Mobile/i ...

  8. js判断手机端操作系统的两种方法

    //判断手机端操作系统(Andorid/IOS),并自动跳转相应下载界面 androidURL ="http://xxx/xxx.apk"; var browser = { ver ...

  9. 记录手机端h5页面碰到的一些问题

    关于input光标在手机端偏移 问题根本:不要使用line-height垂直居中. 解决方法:可直接定义height,然后高度由上下padding值撑开. 移动端清除input光标 ios input ...

随机推荐

  1. [jvm] JVM体系结构

    一.jvm 运行时数据区域 程序计数器 java虚拟机栈 本地方法栈 java堆 方法区 运行时常量池 直接内存(非JVM区域) 二.深入探讨HotSpot虚拟机在Java堆中对象分配.布局和访问的全 ...

  2. mysql主从复制简单配置,满满的干货

    mysql主从备份(复制)的基本原理 mysql支持单向.异步复制,复制过程中一个服务器充当主服务器,而一个或多个其它服务器充当从服务器.mysql复制基于主服务器在二进制日志中跟踪所有对数据库的更改 ...

  3. VS2013过期激活

    然后点击"更改我的产品许可证",输入密钥  : BWG7X-J98B3-W34RT-33B3R-JVYW9 即可注册成功...

  4. Qt 学习之路 2(31):贪吃蛇游戏(1)

    Qt 学习之路 2(31):贪吃蛇游戏(1) 豆子 2012年12月18日 Qt 学习之路 2 41条评论 经过前面一段时间的学习,我们已经了解到有关 Qt 相当多的知识.现在,我们将把前面所讲过的知 ...

  5. JedisPool

    package redis; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; import redis. ...

  6. linux命令eval的用法

    [转自]http://blog.chinaunix.net/uid-21411227-id-1826706.html 1. eval command-line 其中command-line是在终端上键 ...

  7. n皇后问题--DFS输出棋盘

    N皇后问题 Problem Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上.你的任务是,对 ...

  8. RESTful和SOAP的区别

    参考:[接口开发]浅谈 SOAP Webserver 与 Restful Webserver 区别 目录 一.Web Service 二.SOAP 三.REST 四.RPC 客户端和服务器端的通讯方式 ...

  9. 在Spark shell中基于HDFS文件系统进行wordcount交互式分析

    Spark是一个分布式内存计算框架,可部署在YARN或者MESOS管理的分布式系统中(Fully Distributed),也可以以Pseudo Distributed方式部署在单个机器上面,还可以以 ...

  10. JSON转C#实体类

    https://www.bejson.com/convert/json2csharp/