input输入框监控键盘输入自动填入值，而键盘值不输入的方法

需求场景：一个输入框，通过监控键盘输入的 1、2、3、4、5，来自动填入对应的“ I级，II级，III级，SA级，/   ”五个值。

但是填入值之后，键盘值也会输入，比如出现： I级1

第一次尝试方法： fn()是自定义，oninput = fn()，οnclick=fn()，onchange，onfouce，keydown ……都不行。

第二次尝试，输入框 只读，但是没有光标闪烁。

然后突然灵光一闪，我可以限制输入长度！maxlength=0；配合获取焦点事件，然后问题解决。

代码如下：

html页面：
<input data="data" class="layui-input w50" name="myClass" type="text"
       th:value="${sjmx.S_JoinClass}" onfocus="changeInput(this)" maxlength="0"/>

js: 这里也许还能继续改进。就由看到的人自行解决吧。

function changeInput(obj) {
    var $inp = $(obj);
    $inp.bind('keydown', function (e) {
        if (e && e.keyCode == 49) {
            $(obj).val("I级");
        } else if (e && e.keyCode == 50) {
            $(obj).val("II级");
        } else if (e && e.keyCode == 51) {
            $(obj).val("III级");
        } else if (e && e.keyCode == 52) {
            $(obj).val("SA级");
        } else if (e && e.keyCode == 53) {
            $(obj).val("/");
        } else {
            layer.confirm("1=I级，2=II级，3=III级，4=SA级，5=/", function (index) {
                layer.close(index);
            });
            $(obj).val("");
        }
    })
}

 

第二种方法：

var sizeArray = new Array("290×140×90", "240×115×90", "240×140×90", "240×115×90", "490×190×190", "390×190×190", "××");

$("input[name='size']").bind('input propertychange', function () {
    var oldValue = $(this).val().trim();
    var value;
    if(oldValue!=""){
        value = oldValue.charAt(oldValue.length-1);
    }
    if (value.length == 1 && value > "0" && value <= sizeArray.length) {
        var c = value - '0' - 1;
        $(this).val(sizeArray[c]);
    }else{
        $(this).val(oldValue.substr(0,oldValue.length-1));
    }
});