菜单

无法显示非数字字符的问题_javascript技巧_脚本之家【www.2138.com】

2020年3月18日 - www.2138.com
无法显示非数字字符的问题_javascript技巧_脚本之家【www.2138.com】

在活动端webview实现的页面中,有数字的地点必得利用input
type=”number”类型的input,不然触发后的键盘为全键盘,而非平板键盘。但其余的贰个难题是,input
为 type=”number” 类型的江郎才尽彰显非数字字符,比如:12/23中/。

如雷灌耳,HTML5的input 新添了多数类型,如
number,email,url,date系列,search无法显示非数字字符的问题_javascript技巧_脚本之家【www.2138.com】。,telwww.2138.com,等等。这么些新类型提供了更好的输入调控和注解。但是,在使用的长河中您会意识,不应当对它们希望过高。个中的
number
类型比较常用,近期项目里也运用了它,进程中遇到不菲难为,算是用hack的艺术解决了,特记此文,希望对我们全体协理。

只能利用此外的笔触来缓慢解决,举例:显示的时候用非number类型的input或别的元素,当触发onfocus后,利用js
动态更改为number类型。

产物的急需是,输入框只可以输入数字和小数点,而且整数位数不超过9,小数位数不超过2。经常首先想到的是用<input type="number"/>,因为语义上它是数字输入框,并且在移动端获得焦点时默许弹出数字键盘。看上去极漂亮好,但那跟须要还差不菲间隔。

 var oPage = document.querySelector, oTotal = document.querySelector, sOldVal = ''; oPage.addEventListener { this.type = 'number'; sOldVal = this.value; }, false); oPage.addEventListener { var sVal = this.value; this.type = 'text'; if  { this.value += '/' + oTotal.value; } }, false);

上述那篇完美解决input[type=number]不只怕突显非数字字符的主题材料就是我分享给大家的全部内容了,希望能给大家贰个参考,也期待我们多多点拨脚本之家。

关于长度限定,你大概想到了maxlength品质,但缺憾的是它对
number花色无效。何况即使能用maxlength,也很难完成前边的须求,因为小数部分是可选的。至于字符约束,你恐怕会想到用键盘事件来堵住。没有错,能够监听keydown事件,剖断按键的keyCode
来拦截无效字符:

var input = document.querySelector('input');
var validKeys = [];//合法的按键列表
input.addEventListener('keydown', function(e) {
    if(validKeys.indexOf(e.keyCode) < 0) {
        e.preventDefault();
    }
});

这么就不恐怕输入违规字符了。但是现实是残暴的,PC上大概职业出彩,但移动端浏览器对键盘事件扶持并非很好,Android
webview
里取到的keyCode清一色是0。那是chrome前几年的bug,到现行反革命都没完全缓慢解决。参照他事他说加以考查这里(需翻墙)。是否很心塞?
别灰心,还会有别的方法。比方,监听input事件,在其value扭转的时等候检查验字符串。

var input = document.querySelector('input');
var validKeys = [];//合法的按键列表
input.addEventListener('input', function(e) {
    if(e.target.value === '') {
        input.value = oldValue;//伪代码,重置为上次有效值
    }
});

<input type="number" />有个特征,只要输入框内的字符串不可能转换到浮点数,它的值就改为空了。我们能够使用那一个特点,开采输入违规,就将输入值撤回。不过难点又来了,当你按退格键删除字符时,由于前边的逻辑,最终叁个字符不大概删除。这是因为无法区分是退格键照旧输入了违规字符招致值为空,都重新载入参数为上次有效值了。结合键盘事件能够区分,可是前边说了,移动端不可信赖。既然number
input 有过多节制,为何不直接用 text input呢?没错,text
input可以幸免这几个难点,然而它的暗许键盘不是游戏键盘。还会有个筛选,用<input type="tel" />,它有text
input的具有个性,还是能够具有私下认可游戏键盘。燃鹅,在iOS里是拨号键盘,未有一点点号。

www.2138.com 1

<input type=”tel” />

自家只是想输个数字,咋这么多坑?!

稍安勿躁,终相当的大招来了。我们依然继续用number
input。它还应该有个临时用的事件,叫textInput。那是DOM LEVEL3
的平地风波,但骨子里w3c标准里早就删掉它了,不过验证发掘chrome和safari都援救。它能够监听到别的输入,这样就足以分别是输入了地下字符依旧按了退格键。

var input = document.querySelector('input');
var validKeys = [];//合法的按键列表
input.addEventListener('textInput', function(e) {
    if(isNaN(e.data)) {
        input.value = oldValue;//伪代码,重置为上次有效值
    }
});

时至前几日,基本解决了须要里的装有标题。
介怀,以上方案只是为着在活动端webview里衰亡难题,而且是hack的方法,并不是全盘保证。代码也简要了不胜枚举细节。假设大家有越来越好的办法,招待调换。

参照他事他说加以考查资料:
https://bugs.chromium.org/p/chromium/issues/detail?id=118639#c85
https://www.w3.org/TR/DOM-Level-3-Events/#beforeinput
https://www.filamentgroup.com/lab/type-number.html

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图