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

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

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. [HAOI2007]理想的正方形 BZOJ1047 二维RMQ

    题目描述 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: 第一行为3个整数,分别表示a,b,n的值 第二行至 ...

  2. Flask 项目结构(仅供参考)

    project/ app/ # 整个程序的包目录 static/ # 静态资源文件 js/ # JS脚本 css/ # 样式表 img/ # 图片 favicon.ico # 网站图标 templat ...

  3. python学习之路---day06

    一:is 和 == 的区别 01)a b 两个变量 is 是比较变量的内存地址,如果地址相等,则返回True,如果不相等,则返回False == 是比较变量两边内容是否一样,如果一样则返回True,不 ...

  4. kerl build error

    删除 archives文件夹就行了

  5. yum国内镜像配置

    yum默认链接的还是国外的镜像,速度相对不理想,配置成国内的镜像会快很多,这里以阿里镜像为例进行配置: CentOS系统更换软件安装源 #base源#第一步:备份你的原镜像文件,以免出错后可以恢复.m ...

  6. SQL Server2012如何更改服务器的名称

    Problem: sql server 2012 安装完毕后,连接数据库只能使用 机器名\数据库实例 的方式,想用 localhost 或 . 作为服务器名称不可以 Solution: 参考:http ...

  7. bzoj3261: 最大异或和 (可持久化trie树)

    题目链接 题解 看到异或和最大就应该想到01 trie树 我们记\(S_i\)为前i项的异或和 那么我们的目的是最大化\(S_n\)^\(x\)^\(S_{j-1}\) \((l <= j &l ...

  8. 在linux服务器上配置anaconda和Tensorflow,并运行

    1. 查看服务器上的Python安装路径: whereis python 2. 查看安装的Python版本号: python 3. 安装Anaconda: 1)下载 Anaconda2-4.0.0-L ...

  9. js 中的! 和 !! 的区别

    Js中!的用法是比较灵活的,它除了做逻辑运算常常会用!做类型判断,可以用!与上对象来求得一个布尔值,1.!可将变量转换成boolean类型,null.undefined和空字符串取反都为false,其 ...

  10. js中的table导出成Excel表格

    首先判断手否是IE,原因在于IE导出我用的是ActiveXObject,判断的方式很简单,只需要拿到window.navigator.userAgent即可进行判断,代码如下 function get ...