完美解决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 相关文章推荐
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 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 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
js/html光标定位的实现代码
2013/09/23 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
微信小程序签到功能
2018/10/31 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
Python多线程编程(一):threading模块综述
2015/04/05 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
python生成随机图形验证码详解
2017/11/08 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
TensorFlow实现模型评估
2018/09/07 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
总务岗位职责
2013/11/19 职场文书
大学毕业感言50字
2014/02/07 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
创先争优个人承诺书
2014/08/30 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
老公婚前保证书
2015/02/28 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书