JavaScript 输入小数点(event.key或event.code)

1. 概述

1.1 说明

在开发过程中，有时候需要仅输入数字与小数，故记录下使用过的功能，以便后期使用。

1.2 key

定义：按下按键时返回的标识符，按键标识符是表示键盘按钮的字符串(如1，2，a等)。

使用：event.key去获取按下按键的字符串。

1.3 keyCode

　　定义：按下按键时此按键值所对应的字符代码（如ESC键为27）。

　　使用：event.keyCode去获取按下按键的字符码。

　　备注：此功能已废弃，但是仍然可以使用。

 2. 示例

 2.1 js代码

    /**
     * 输入为小数
     * @param event 事件
     * @param allowPoint 是否包含小数点
     **/
    function inputNumber (event, allowPoint) {
        let bInputTrue = false;
        if (event.key !== undefined) {
            let arrNumber = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "Backspace", "Delete","Shift"];//数字键盘与删除键
            let arrTopNumber = ["Digit0", "Digit1", "Digit2", "Digit3", "Digit4", "Digit5", "Digit6", "Digit7", "Digit8", "Digit9"];//中文_上边数字键盘
            let arrNumNumber = ["Numpad1", "Numpad2", "Numpad3", "Numpad4", "Numpad5", "Numpad6", "Numpad7", "Numpad8", "Numpad9"];//中文_右边数字键盘
            if (allowPoint) {
                arrNumber.push(".");
                arrTopNumber.push("Period");
                arrTopNumber.push("NumpadDecimal");
            }
            if(event.key=="Process"){
                for (let i = 0; i < arrTopNumber.length; i++) {
                    if (event.code == arrTopNumber[i]) {
                        bInputTrue = true;
                        break;
                    }
                }
                if(bInputTrue ==false ){
                    for (let i = 0; i < arrNumNumber.length; i++) {
                        if (event.code == arrNumNumber[i]) {
                            bInputTrue = true;
                            break;
                        }
                    }
                }
            } else {
                for (let i = 0; i < arrNumber.length; i++) {
                    if (event.key == arrNumber[i]) {
                        bInputTrue = true;
                        break;
                    }
                }
            }

        } else if (event.keyCode !== undefined) {
            let charCode = event.keyCode;
            let bCondition1 = charCode >= 48 && charCode <= 57; //数字
            let bCondition2 = charCode >= 96 && charCode <= 105; //小键盘数字
            let bCondition3 = charCode == 46 || charCode == 8; //两个删除键

            let decimalPoint = charCode == 110 || charCode == 190;//小数点
            let bCondition = null;
            let bShift = event.shiftKey == 1;

            if (allowPoint) {
                bCondition = bCondition1 || bCondition2 || bCondition3 || decimalPoint;
            } else {
                bCondition = bCondition1 || bCondition2 || bCondition3;
            }
            if (bCondition && !bShift) {
                bInputTrue = true;
            } else {
                bInputTrue = false;
            }
        }
        if (bInputTrue) {
            return true;
        } else {
            document.activeElement.blur();//使失去焦点
            if (event.preventDefault) {
                event.preventDefault();//中文情况下不起作用
            }
            else {
                event.returnValue = false;
            }
        }
    }

　　注意：代码 document.activeElement.blur(); 会使输入框焦点失去，故此处可考虑是否使用。

 2.1 html代码

<input onkeydown="inputNumber(event,true)"  onpaste="return false"  ondragenter="return false" oncontextmenu="return false;" style="ime-mode:disabled">