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;
                }

根据使用体验,觉得第二种方法为首选,毕竟很方便

当然也可以直接写一个内置的数字键盘,当然菜鸡太菜,还在努力学习。

猜你喜欢

转载自www.cnblogs.com/chenhuan5721/p/11589141.html
今日推荐