input[type=number]禁止输入非数字类型以外的内容

2018-1-29    分类: 前端资源

html5中input有number类型可以实现只输入数字类型,但是还不够完善,还是需要js正则来进行判断过滤。

 //初始化样式
 input[type=number]::-webkit-textfield-decoration-container {
    background-color: red; /* 背景颜色 */
 }
 input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* 去掉上下箭头 */
 }
 input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* 有无看不出差别 */
 }


 <input type="number" id="amount">

var re = /^[0-9]+.?[0-9]*$/; //判断输入的是否位数字
$('#amount').bind('input propertychange', function() {
   if (!re.test($(this).val())) {  //只允许纯数字或数字加小数点的格式存在 
       if($(this).val()==''){
          $(this).val('');
       }else{
          $(this).val( Math.floor( $(this).val()*100 )/100 )  //不四舍五入,仅仅保留2位小数
       }
   }
});