时间戳

首页 > 解决方案 > 如何使 contenteditable div 只接受数值？CTRL、Spacbar 和退格等所有功能键也应该可以使用

javascript - 如何使 contenteditable div 只接受数值？CTRL、Spacbar 和退格等所有功能键也应该可以使用

问题描述

我使用此代码，但它也允许字符。我只希望 div 接受数值，而功能键也应该适用于它。

 this.shadowRoot.querySelector('div').addEventListener('keydown', async (e) => {
                if (e.keyCode >= 65 && e.keyCode <= 90) {
                    e.preventDefault();
                    return false;
                } 
            });

标签： javascript

解决方案

使用数组定义允许的键，如果您打算使用 keycode，则数组值应该是 ascii 值。可以使用 Key 属性代替 keycode。键属性是一个只读属性，它返回键的值。你可以参考这篇文章。

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

allowedKeys = ['Backspace','Tab','Escape','Enter','1','2','3','4','5','6','7','8','9','0','ArrowLeft','ArrowRight','ArrowUp','ArrowDown','Delete']

this.shadowRoot.querySelector('div').addEventListener('keydown', async (e) => {
                if (!allowedKeys.includes(e.key)) {
                    e.preventDefault();
                    return false;
                } 
            });

推荐阅读