input 框自动检测输入是否为数字
最近做一个公众号,我这个菜鸡不得不学习很多东西,谁让老师要我一个人做这个项目呢?
好,进入正题,因为菜,所以很菜,但是百度很厉害啊,谁让我不好意思问老师,而且我也觉得问这么小的问题,太难以启齿。。
因为页面中要输入至少一次的手机号码,所以,输入的东西必须为数字,不能有其他字符(汉字,特殊字符,字母。。。),所以菜鸡我尝试了很久,
然后总结了下我的成果。
代码:
<input type="tel" maxlength="11" id="delivery-tel" placeholder="手机号">
1.需要点击才可以生效,删除不为数字的内容,留下数字,感觉很麻烦
onclick="if (isNaN(value)) execCommand('undo')"
2.不是数字根本输不进去好吗
onkeyup="this.value=this.value.replace(/[^\d]/g,'') "
3.当表单提交的时候才反应,清掉不为数字的内容,当然也很麻烦
var deliveryTel = $.trim($('#delivery-tel').val());
var pattern = /^[0-9]+(.[0-9]{0,3})?$/;
if (!pattern.test(deliveryTel)) {
dialog.toast('请输入数字', 'none', 1000);
$('#delivery-tel').val('');
$('#delivery-tel').focus();
return;
}
根据使用体验,觉得第二种方法为首选,毕竟很方便
当然也可以直接写一个内置的数字键盘,当然菜鸡太菜,还在努力学习。