您的位置:首页 > 移动开发

移动端限制两位小数并且弹出数字键盘(解决使用H5S使用input[type='number']不兼容JS的问题)

u011089530 2017-04-27 12:05 85 查看
今天在写移动端设置金额功能的时候发现,将input的type类型改为number后会在输入的时候直接弹出数字键盘;但是,输入数字后再输入小数点会发现小数点跳动到光标后面了;这种小数点跳到光标后面的情况在当input类型设置成text后是不会出现的,但是无法直接弹出数字键盘(当然,可以重新手写新键盘);

后来发现将type类型设置为tel,就会解决此问题(请忽略我的投机取巧~~),并且可以完美的限制整数或者小数点位数;代码如下:

<input type="tel" onkeyup="onlyNumber(this)" id="number">
<div class="msg"></div>
<script>
function onlyNumber(obj){
//先把非数字的都替换掉,除了数字和.
obj.value = obj.value.replace(/[^\d\.]/g,'');
//必须保证第一个为数字而不是.
obj.value = obj.value.replace(/^\./g,'0.');
//保证只有出现一个.而没有多个.
obj.value = obj.value.replace(/\.{2,}/g,'.');
//保证.只出现一次,而不能出现两次以上
obj.value = obj.value.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
//只能输入两个小数
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
}
</script>
标签:  javascript 移动 html5
相关文章推荐