移动端开发input标签调用数字键盘
来源:互联网 发布:淘宝上韩国运动品牌 编辑:程序博客网 时间:2024/06/18 09:49
先上代码:
<input id="pp" type="number" maxlength="6" pattern="[0-9]*" name="password" oninput="if(value.length>6)value=value.slice(0,6)"/>
maxlength属性规定输入内容的最大长度,有些浏览器会出现把type设置为number后maxlength就失效了,微信浏览器我测试的时候还没有遇到这种情况,为了预防万一我们可以加上以下这行代码:
oninput="if(value.length>6)value=value.slice(0,6)" /*存在浏览器差异*/
type="text"和type=“number”亲测在微信浏览器ios端中能调出数字键盘,但在安卓端中type="text"对某些手机自带输入法无效。
在开发过程中我遇到最棘手的问题不是如何调用手机数字键盘,而是如果要把当前这个input用作密码用途的话如何将输入的内容变成“·”,最后,我选择通过改变input的type属性来实现效果,通过oninput 事件触发,当input中有新内容输入时,触发一次,代码如下:
document.getElementById("pp").oninput=function(){ document.getElementById("pp").setAttribute("type", "password"); };但是如果我们在完成一次输入后,重新点击input时调用的却不是纯数字键盘,因为此时我们的input属性已经变成了password,但是如果我们在上面的代码前加上一个对input的focus触发事件,将input的属性重新修改成number可不可以呢?经过自己的几次实践,发现还是不能调用出纯数字键盘,原因是当input标签属性已经为password时无论是focus事件或者是onclick事件触发时,就会调用手机的键盘,此时input的属性还是password。
解决方法:
用一个div通过绝对定位或者相对定位遮盖input(微信浏览器如果用float浮动的话容易发生点击穿透事件,即:点击表层会触发底层的点击事件),相当于给input输入框上面添加了一层罩。通过这个“罩”的点击来触发改变input属性的事件,完整代码如下:
<div id="pay" class="show" style="width:100%;height:100%; "> <div class="nav" > <span class="nav_s1" > 返回</span> </div> <div class="pay_header" >*请输入密码</div> <div class="pay_pass" > <input id="pp" type="number" maxlength="6" pattern="[0-9]*" name="password" oninput="if(value.length>6)value=value.slice(0,6)"/> </div> <div id="ppt" style="height:2.5rem;line-height: 2.5rem;width:100%;margin:0 auto;margin-top:-2.5rem;position: absolute" ></div> <div class="pay_tip" > 忘记密码? </div> <div id="pay_sure"> 确定 </div> <script> document.getElementById("ppt").onclick=function() { document.getElementById("pp").value=""; document.getElementById("pp").setAttribute("type", "number"); document.getElementById("pp").focus(); document.getElementById("pp").oninput=function(){ document.getElementById("pp").setAttribute("type", "password"); }; }; document.getElementById("pp").onblur=function() { document.getElementById("pp").setAttribute("type", "password"); } </script></div>
阅读全文
0 0
- 移动端开发input标签调用数字键盘
- input直接调用数字键盘
- html在移动端input调出数字键盘同时密文输入
- 移动端input上传调用相机
- 如何在移动端调出纯数字键盘
- 移动web端<input type="number">手机上点击直接打开数字键盘,并修改样式去除最右端上下箭头
- 移动端限制两位小数并且弹出数字键盘(解决使用H5S使用input[type='number']不兼容JS的问题)
- 前端移动端开发头部标签
- 移动开发 meta标签
- 开发自定义View 数字键盘
- 密码框password调用数字键盘
- Android移动端input标签type=submit时,点击时会光标会进入按钮。。。
- input标签添加上disable属性在移动端字体颜色不兼容的解决办法。
- 移动端用input:file调用手机相册、摄像头、和sd卡的相册文档
- 移动端fixed + Input 调用键盘的时候fixed无效问题(css解决)
- meta标签 -- 移动端
- 移动端meta标签
- 移动端meta标签
- 《有关android的apk的安装简易脚本编写》
- windows下安装xgboost
- Python每日小结(三)
- Heat 相关,Cloud-init & Cloud-config
- Int 拆装箱和缓存
- 移动端开发input标签调用数字键盘
- The partial sum problem
- FrameLayout+底部按钮
- IP-网际协议
- MongoDB 或者 redis 可以替代 memcached 吗?
- Kotlin 基础语法-03
- 淘宝双十一用哪些“潜规则”冲击1500亿?
- 解决前端跨域的正确姿势
- 程序猿节,自己写第一篇博客来纪念一下,记录一下自己的学习过程。