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));
    }
});