【干货】文本框除数字以外不许输入别的字符

web前端开发文字教程|移动前端开发设计软件|移动前端开发技术架构

今天在切图网一个手机webapp项目中,需要对输入金额的文本框加以判断,这里只能输入数字,输入其他的字符自动清除掉,这个肯定不难,但是如果你没有思路,手上也没有比较实用的代码片段,这个也着实会让你头疼,关于这个问题,一共测试了两种可行方案。

1, keyup的时候,对于文本框的内容进行replace 正则替换,落地代码:

html 代码

/*文本框只能输入文字*/
var just_num = function (obj) {
    obj.val(obj.val().replace(/\D|^0/g, ”));
}

为了方法灵活调用所以写成了函数,调用:

html 代码

//用法
$(‘.test’).keyup(function(){
   just_num($(this));
})

但是这种方式,在手机下存在一个bug,就是不能在中间插入数字,(原因也很简单,因为keyup的时候,文本执行了一次替换,所以光标就不在原来位置了)

2,这个方法简单,暴力,高效
思路:如果 keyCode 不是数字,直接 event.preventDefault(); 禁用js原生事件,落地代码:

html 代码

var just_num2 = function (event) {
    // IE
    if (!$.browser.mozilla) {
        if (event.keyCode && (event.keyCode < 48 || event.keyCode > 57))
            event.preventDefault();
    }
    //firefox
    else {
        if (event.charCode && (event.charCode < 48 || event.charCode > 57))
            event.preventDefault();
    }
}

为了使用方法,也封装了函数,调用:

html 代码

//拒绝输入数字以外的字符
$(‘input[type=number]’).keypress(function(event){
  just_num2(event);
})

webapp是支持 type=”number” 写法的,所以配合这个使用,非常有效,代码也标准。

招聘计算机程序前端开发|前端nfc开发教程|移动互联前端开发

» 本文来自:前端开发者 » 《【干货】文本框除数字以外不许输入别的字符》
» 本文链接地址:https://www.rokub.com/4133.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!