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

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

在移动端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 >
复制代码





目录
相关文章
|
5月前
|
前端开发
input去掉输入框type为number时的上下箭头的实现方法
input去掉输入框type为number时的上下箭头的实现方法
42 0
|
前端开发
css:input数字编辑框number去掉右侧上下箭头
css:input数字编辑框number去掉右侧上下箭头
273 0
css:input数字编辑框number去掉右侧上下箭头
|
移动开发 前端开发
火狐谷歌浏览器去掉input type=number时控件的方法
火狐谷歌浏览器去掉input type=number时控件的方法
|
6月前
|
算法
Leetcode 313. Super Ugly Number
题目翻译成中文是『超级丑数』,啥叫丑数?丑数就是素因子只有2,3,5的数,7 14 21不是丑数,因为他们都有7这个素数。 这里的超级丑数只是对丑数的一个扩展,超级丑数的素因子不再仅限于2 3 5,而是由题目给定一个素数数组。与朴素丑数算法相比,只是将素因子变了而已,解法还是和朴素丑数一致的。
65 1
|
1天前
|
存储 算法
【LeetCode力扣】单调栈解决Next Greater Number(下一个更大值)问题
【LeetCode力扣】单调栈解决Next Greater Number(下一个更大值)问题
4 0
|
6月前
|
存储
Leetcode Single Number II (面试题推荐)
给你一个整数数组,每个元素出现了三次,但只有一个元素出现了一次,让你找出这个数,要求线性的时间复杂度,不使用额外空间。
22 0
LeetCode 136. 只出现一次的数字 Single Number
LeetCode 136. 只出现一次的数字 Single Number
LeetCode contest 177 5169. 日期之间隔几天 Number of Days Between Two Dates
LeetCode contest 177 5169. 日期之间隔几天 Number of Days Between Two Dates