完美解决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 判断脚本加载完毕的代码
Jul 13 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
JS中常用的消息框总结
Feb 24 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
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
用PHP实现WEB动态网页静态
2006/10/09 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
php7 新增功能实例总结
2020/05/25 PHP
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
Python with用法实例
2015/04/14 Python
Python中的变量和作用域详解
2016/07/13 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
python与mysql数据库交互的实现
2020/01/06 Python
django rest framework 过滤时间操作
2020/07/12 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
一套C#面试题
2013/10/09 面试题
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
环境工程大学生个人的自我评价
2013/10/08 职场文书
个人自我剖析材料
2014/02/07 职场文书
大学秋游活动方案
2014/02/11 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
门市房租房协议书
2014/12/04 职场文书
资产移交协议书
2016/03/24 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP