还在苦苦敲代码开发APP?你out啦! 试试积木搭建APP吧~

扩展jQuery的功能限制只能输入数字

来源:     2017-09-12 13:57:34    人气:     我有话说( 0 人参与)

在很多的项目中,数字输入的校验是不可避免的,我们总是担心用户输入的数据不符合我们的规则,首先我们不讨论恶意用户的行为,对于正常的用

在很多的项目中,数字输入的校验是不可避免的,我们总是担心用户输入的数据不符合我们的规则,首先我们不讨论恶意用户的行为,对于正常的用户,我们也希望尽量减少因为用户输入带来的意外情况,同时这也提高用户体验的一种有效的方式。这样的代码通常是样板式的,因此我们可以考虑将其做成一个jQuery的插件以方便使用。

// 限制只能输入数字
$.fn.onlyNum = function () {
    $(this).keypress(function (event) {
        var eventObj = event || e;
        var keyCode = eventObj.keyCode || eventObj.which;
        // valid the input value (according to the regex)
        return regNum(this.value + String.fromCharCode(keyCode)+0);
    }).focus(function () {
    //禁用输入法
        this.style.imeMode = 'disabled';
    });
};
/* 正则校验 */
function regNum(number) {
    if (/^[0-9]+(\.[0-9]+)?$/.test(number))
        return true;
    else
        return false;
}

这里通过正则校验来确定允许输入的格式,例中是进行数字的校验,用户可以输入小数,用户第一次输入" . "的时候需要补齐格式才能校验,当然只是做校验时使用,对用户的实际输入是不产生影响的。

第二个绑定的功能是当输入框聚焦的时候,不在允许使用输入法。

$("#numdd").onlyNum();

之前还写过对粘贴事件的处理:

bind("paste", function () {
   //获取剪切板的内容
   var clipboard = window.clipboardData.getData("Text");
   if (/^\d+$/.test(clipboard))
       return true;
   else
       return false;
})

但是,目前直接进行支持的只有IE,对于其他的浏览器可能需要做比较复杂的操作才能获取剪切板的内容。

在IE中是对外有接口的,可以通过window.clipboardData对象得到剪贴板的内容,这样就容易导致开发人员在后台写一个程序记录用户剪贴板的内容,这样可以把海量的数据集中起来做数据挖掘,这个对用户的安全来说是很可怕的,因此在访问的时候会提示用户是否允许访问剪贴板的内容。

在IE意外的浏览器是不允许访问剪贴板内容的,只有拒绝才是最安全的,所以在火狐等其他浏览器中不能通过window.clipboardData对象来访问剪贴板的内容。

jQuery 数字

本文源自互联网,采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可,
版权归原作者,如有问题请联系service@tsingfun.com (编辑:admin)
分享到: