blocks|key|3064085|text|作为一种实用的解决方案，使用key|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3064086|假设所有单字符键名都是可打印的。|unordered-list-item|3064087|除空格外，当前为真："+"|3064088|Values|3064089|3064090|​|3064091|检查是否没有按下修饰符(https://stackoverflow.com/a/4194212)|3064092|示例代码：|3064093|const+isPrintableChar+=+e.key.length+===+1+&&+e.key+!==+'+';
const+noModifier+=+!e.ctrlKey+&&+!e.metaKey+&&+!e.altKey;
return+isPrintableChar+&&+!noModifier;|code-block|syntax|javascript|3064094|为了实现向后兼容性，请考虑使用e.which作为后盾。|3064095|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/API/KeyboardEvent/key/Key_Values|1|https://stackoverflow.com/a/4194212^0|E|3|0|1|A|3|1|0|6|0|1|0|0|C|Z|1|0|0|0|F|7|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1D|8|@]|D|@]|E|$]]|$1|I|3|J|5|H|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|K|3|L|5|H|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|M|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1M|8|@]|D|@]|E|$]]|$1|P|3|Q|5|H|7|1N|8|@]|D|@$9|1O|A|1P|1|1Q]]|E|$]]|$1|R|3|S|5|6|7|1R|8|@]|D|@]|E|$]]|$1|T|3|U|5|V|7|1S|8|@]|D|@]|E|$W|X]]|$1|Y|3|Z|5|6|7|1T|8|@$9|1U|A|1V|B|C]]|D|@]|E|$]]|$1|10|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]|18|$5|13|14|15|E|$16|19]]]]

As a pragmatic solution use <code>key</code>:

<ul>
<li>assume that all single-character key names are printable

<ul>
<li>currently true except for space: <code>" "</code></li>
<li><a href="https://developer.mozilla.org/en/docs/Web/API/KeyboardEvent/key/Key_Values" rel="nofollow noreferrer">https://developer.mozilla.org/en/docs/Web/API/KeyboardEvent/key/Key_Values</a></li>
</ul></li>
<li>check that no modifiers were pressed (<a href="https://stackoverflow.com/a/4194212">https://stackoverflow.com/a/4194212</a>)</li>
</ul>

Example code:

<pre><code>const isPrintableChar = e.key.length === 1 &amp;&amp; e.key !== ' ';
const noModifier = !e.ctrlKey &amp;&amp; !e.metaKey &amp;&amp; !e.altKey;
return isPrintableChar &amp;&amp; !noModifier;
</code></pre>

For backward compatibility, consider using <code>e.which</code> as a fallback.

blocks|key|3064115|text|好，在研究了一段时间之后，答案是:如果不依赖于不推荐的API或textarea攻击，就无法确定这一点。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3064116|当然，这些都不太可能消失，但是如果有人在没有他们的情况下想办法做到这一点，他们就找不到了。|3064117|部分解决方案是黑名单的key值，但这只是一个问题，一个新的电视推出了一个古怪的遥控器额外的专有密钥或类似的东西，所有的赌注都取消了。|3064118|entityMap^0|V|8|0|0|B|3|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|K|$]]

Okay after looking into it for some time, the answer is: You can't determine this without relying on deprecated APIs or <code>textarea</code> hack.

Of course these are unlikely to ever go away, but if someone ends up looking for a way to do this without them, they won't find one.

A partial solution is a blacklist of the <code>key</code> values, but it's only a question of a new TV coming out with a quirky remote with extra proprietary keys or something like that and all bets are off.

<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Properties" rel="noreferrer"><code>char</code> is deprecated</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/charCode" rel="noreferrer"><code>charCode</code> is deprecated</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key" rel="noreferrer"><code>key</code> fires for both printable characters and control keys</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode" rel="noreferrer"><code>keyCode</code> is deprecated</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which" rel="noreferrer"><code>which</code> is deprecated</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Events/keypress" rel="noreferrer"><code>keypress</code> is deprecated</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Events/input" rel="noreferrer"><code>input</code> does not fire for elements that are not <code>input</code>, <code>textarea</code>, <code>select</code> or <code>contenteditable</code></a> - most annoyingly <code>tabindex</code> is not enough</li>
</ul>

Is the recommended way going forwards to keep the list of <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values" rel="noreferrer">predefined <code>key</code> values</a> as a blacklist and assume what's not on there is a printable character? How's that going to work out for keyboards with special/programmable keys?

When trying to capture printable characters on non-<code>input|textarea|select|contenteditable</code>, is as of current the only non-hacky (no incomplete ranges or blacklists as seen in many similar questions) way without using deprecated features to use a hidden <code>input</code>/<code>textarea</code> and use its value for capturing characters that actually change that value?

Determine if key press resulted in printable Unicode character being input without deprecated APIs

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 -最令人恼火的是，tabindex是不够的推荐的方法是将列表保留为黑名单，并假定没有可打印字符的内容吗？对于带有特殊/可编程键的键盘来说，这是如何实现的呢？当试图在非input|textarea|select|contenteditable上捕获可打印字符时，目前唯一的非哈基(没有许多类似问题中看到的不完整的范围或黑...

问确定按键是否导致输入可打印Unicode字符，而不使用不推荐的APIs。
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问确定按键是否导致输入可打印Unicode字符，而不使用不推荐的APIs。EN