控制input输入框只输入数字并且enter键时提交

发表于

这两天关于项目中列表排序的的问题，php程序员建议在表格中增加input输入框order字段，来作为输入提交给每行数据进行排序。

关于这个之前大概也有做过，所以便有了下面的思路。

键盘控制输入类型只能为数字，以及小键盘的数字，当输入为中文时，keydown事件匹配中文后对文本进行字符串替换；当键盘触发enter按键时，提交input框中的文本，或者input框失去焦点时，也提交；但是最后有一个bug，就是当正在输入中文时切换输入法，那么输入会变为字母并且enter提交，对于这个暂时未有合适的办法。后续可以解决时候再更新本文。

代码如下，可以参考
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/**
 * table cell number order property
 */
$(function(){
    //网站管理 - 新闻 活动 底部链接 输入order值排序
    $(document).on("keydown keyup press change","input[table-cell-number=true]",function(e){
        var _input = $(this); 
        var c = e.keyCode || e.charCode;
        var r = checkKeyResult(_input,c);
        // console.log(r+'--');
        if(r){
            if(r && r == 13){
                attrSort($(this),$(this).val(),iorderCallback);
            }
        }else{
            e.preventDefault();
        }
    })
    $(document).on("blur","input[table-cell-number=true]",function(e){
        attrSort($(this),$(this).val(),iorderCallback);
    })
    function attrSort(obj,val,callbackFun){
        //is empty submit or don't
        var _this = obj;
        var _sort = _this.attr("attr-sort");
        var _id = _this.attr("attr-id");
        var _val = $.trim(val)=='' ? 0:val;
            if(_val==_sort){
                //没改变
                return false;
            }else{
                //已改变 ajax提交
                return callbackFun(_id,_val);
            }
    }
    function checkKeyResult(that,c){
        if((c >=48 && c <= 57)||(c >= 96 && c <= 105)){
            // console.log(c+'数字');
            return true;
        }else if(c == 8){
            // console.log(c+'栅格');
            return true;
        }else if(c == 13){
            // console.log(c+'enter');
            return 13;
        }else{
            // console.log(c+'中文或字符');
            that.val(that.val().replace(/[\u4e00-\u9fa5]/g, ''));
            return false;
        }
    }
    //------------------
})

后续会再次更新。