完美解决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 相关文章推荐
网页中CDATA标记的说明
Sep 12 Javascript
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 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
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
internal修饰符起什么作用
2013/12/16 面试题
趣味游戏活动方案
2014/02/07 职场文书
房屋租赁协议书
2014/04/10 职场文书
IT工程师岗位职责
2014/07/04 职场文书
先进个人事迹材料
2014/12/29 职场文书
2014年终个人总结报告
2015/03/09 职场文书
投诉书格式范本
2015/07/02 职场文书
证婚人致辞精选
2015/07/28 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
mysql事务隔离级别详情
2021/10/24 MySQL
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏