完美解决input[type=number]无法显示非数字字符的问题
更新时间：2017年02月28日 09:56:23 投稿：jingxian
下面小编就为大家带来一篇完美解决input[type=number]无法显示非数字字符的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在移动端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获取URL参数的方法分享，主要包括字符串 split 方法、 URLSearchParams 方法、正则匹配方法等，具有一定的参考价值需要的小伙伴可以参考一下2022-04-04
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
下面小编就为大家带来一篇js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了JS实现DOM删除节点操作,结合实例形式分析了javascript使用removeChild()操作页面dom节点删除功能的相关实现技巧,需要的朋友可以参考下2018-04-04
这篇文章主要给大家介绍了关于利用Echarts如何实现多段圆环图的相关资料,文中通过实例代码代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了不容错过的两款Bootstrap Icon图标选择组件，支持自定义的图标，拿出来分享下，绝对的干货，感兴趣的小伙伴们可以参考一下2016-01-01
Math 是javaScript的内置对象，包含了部分数学常数属性和数学函数方法。本文将详细讲解Math基本方法的使用，感兴趣的小伙伴可以学习一下2022-04-04
OpenAI的一款聊天机器人模型ChatGPT爆火，本篇文章用一百行html+css+js代码给大家制作一款简易的聊天机器人。2023-02-02
这篇文章主要介绍了JavaScript中的比较操作符>、<、>=、<=介绍,本文先是讲解了操作符的一些使用规则,然后给出了操作实例,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了CocosCreator实现技能冷却效果，同学们可以跟着教程，亲手试一下，代码都是可以复用的2021-04-04
本文通过两种方法给大家介绍vue-cli+es6引入es5写的js，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2019-04-04
最新评论