完美解决input[type=number]无法显示非数字字符的问题


Posted in Javascript onFebruary 28, 2017

在移动端webview实现的页面中,有数字的地方必须使用input type="number"类型的input,否则触发后的键盘为全键盘,而非数字键盘。但另外的一个问题是,input 为 type="number" 类型的无法显示非数字字符,比如:12/23中/。

只能采取另外的思路来解决,比如:显示的时候用非number类型的input或其它元素,当触发onfocus后,利用js 动态修改为number类型。

<input class="pg-page-num" type="text" name="" value="34/233" id="pageNum">
<input type="hidden" name="" value="25" id="totalPage">

<script type="text/javascript">
  var oPage = document.querySelector('#pageNum'),
    oTotal = document.querySelector('#totalPage'),
    sOldVal = '';

  oPage.addEventListener('focus', function () {
    this.type = 'number';
    sOldVal = this.value;
  }, false);

  oPage.addEventListener('blur', function () {
    var sVal = this.value;
    this.type = 'text';
    if (sVal != sOldVal) {
      this.value += '/' + oTotal.value;
    }
  }, false);
</script>

以上这篇完美解决input[type=number]无法显示非数字字符的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
js Event对象的5种坐标
Sep 12 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
canvas红包照片实例分享
Feb 28 #Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 #Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 #Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 #Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 #Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 #Javascript
canvas绘图不清晰的解决方案
Feb 28 #Javascript
You might like
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
javascript读写json示例
2014/04/11 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python3基础之条件与循环控制实例解析
2014/08/13 Python
python的keyword模块用法实例分析
2015/06/30 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
python将txt文件读取为字典的示例
2018/12/22 Python
Python中if有多个条件处理方法
2020/02/26 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
求职信格式范本
2013/11/15 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers