如何将 Javascript keyCode 转换为 charCode?
How do you convert a Javascript keyCode to a charCode?
在Javascript键盘事件中,为按下的键提供了一个代码,但是,它不是 ASCII 或 UTF-8字符代码, 而是键盘按键的代码。有时 keyCodes 恰好与 ASCII/UTF-8 代码匹配,有时则不匹配。
有没有办法,给定一个 Javascript 键码(通过 e.keyCode
或 e.which
访问)得到相应的 ASCII 或 UTF-8 字符码?
Here's a working JSFiddle 来证明我的意思,或者 运行 下面的代码片段。
document.addEventListener("keyup", function(e) {
document.querySelector(".key").innerHTML = e.key;
document.querySelector(".keyCode").innerHTML = e.keyCode;
document.querySelector(".UTF").innerHTML = String.fromCharCode(event.keyCode);
});
code {
background-color: #e2aec8ab;
border: solid 1px gray;
border-radius: 3px;
padding: 0 .5em;
min-height: 1em;
min-width: .2em;
margin: 0 .1em;
}
.output {
margin: 2em;
border: solid 1px lightgray;
border-radius: 3px;
background-color: rgba(200, 250, 230, .3);
padding: 1em;
}
Type here. Try some alpha letters as well as special keys like <code>`</code>
<code>-</code>
<code>=</code>
<code>[</code>
<code>]</code>
<code>[ENTER]</code>
<code>;</code>
<code>'</code>
<div class="output">
You typed <code class="key"></code> which is Javascript <b></b>keyCode</b> <code class="keyCode"></code>, in UTF that would be <code class="UTF"></code>
</div>
两个例子:
- 在键盘上键入
2
- 捕获事件。
event.keyCode
是 50。
- UTF字符50是
2
(DIGIT TWO)
但是:
- 在键盘上键入
[
- 捕获事件。
event.keyCode
是 219。
- UTF字符219为
Û
(LATIN CAPITAL LETTER U WITH CIRCUMFLEX)
- 我希望事件包含的字符代码是
91
,对应于 LEFT SQUARE BRACKET。
如何将 Javascript 键码(例如 219
)转换为 UTF-8 字符码(例如 91
)?
我只想说,这个问题变成了一次有趣的学习冒险。但是....
您正在使用已弃用的 API。
事实证明 KeyboardEvent.keyCode 已被弃用一段时间。因为它使用十进制版本的 ASCII。正确的代码实际上是 event.Code
。但这不是你想要的。
要获取 ascii 码,您可以使用 event.key.charCodeAt()
这确实有一些缺陷,因为当您按下 shift 时它会报告 S
。但是你可以用event.location
判断这个键是不是特殊的控制键。零是标准键,1-3 是特殊位置(我认为)。
document.addEventListener("keyup", function(e) {
document.querySelector(".key").innerHTML = e.key;
document.querySelector(".keyCode").innerHTML = e.code;
document.querySelector(".ascii").innerHTML = e.key.charCodeAt()
document.querySelector(".UTF").innerHTML = String.fromCharCode(event.key.charCodeAt());
});
code {
background-color: #e2aec8ab;
;
border: solid 1px gray;
border-radius: 3px;
padding: 0 .5em;
min-height: 1em;
min-width: .2em;
margin: 0 .1em;
}
.output {
margin: 2em;
border: solid 1px lightgray;
border-radius: 3px;
background-color: rgba(200, 250, 230, .3);
padding: 1em;
}
Type here. Try some alpha letters as well as special keys like <code>`</code>
<code>-</code>
<code>=</code>
<code>[</code>
<code>]</code>
<code>[ENTER]</code>
<code>;</code>
<code>'</code>
<div class="output">
You typed <code class="key"></code> which is Javascript <b>keyCode</b> <code class="keyCode"></code>, in ASCII that would be <code class="ascii"> </code> which is <code class="UTF"></code>
</div>
在Javascript键盘事件中,为按下的键提供了一个代码,但是,它不是 ASCII 或 UTF-8字符代码, 而是键盘按键的代码。有时 keyCodes 恰好与 ASCII/UTF-8 代码匹配,有时则不匹配。
有没有办法,给定一个 Javascript 键码(通过 e.keyCode
或 e.which
访问)得到相应的 ASCII 或 UTF-8 字符码?
Here's a working JSFiddle 来证明我的意思,或者 运行 下面的代码片段。
document.addEventListener("keyup", function(e) {
document.querySelector(".key").innerHTML = e.key;
document.querySelector(".keyCode").innerHTML = e.keyCode;
document.querySelector(".UTF").innerHTML = String.fromCharCode(event.keyCode);
});
code {
background-color: #e2aec8ab;
border: solid 1px gray;
border-radius: 3px;
padding: 0 .5em;
min-height: 1em;
min-width: .2em;
margin: 0 .1em;
}
.output {
margin: 2em;
border: solid 1px lightgray;
border-radius: 3px;
background-color: rgba(200, 250, 230, .3);
padding: 1em;
}
Type here. Try some alpha letters as well as special keys like <code>`</code>
<code>-</code>
<code>=</code>
<code>[</code>
<code>]</code>
<code>[ENTER]</code>
<code>;</code>
<code>'</code>
<div class="output">
You typed <code class="key"></code> which is Javascript <b></b>keyCode</b> <code class="keyCode"></code>, in UTF that would be <code class="UTF"></code>
</div>
两个例子:
- 在键盘上键入
2
- 捕获事件。
event.keyCode
是 50。 - UTF字符50是
2
(DIGIT TWO)
但是:
- 在键盘上键入
[
- 捕获事件。
event.keyCode
是 219。 - UTF字符219为
Û
(LATIN CAPITAL LETTER U WITH CIRCUMFLEX) - 我希望事件包含的字符代码是
91
,对应于 LEFT SQUARE BRACKET。
如何将 Javascript 键码(例如 219
)转换为 UTF-8 字符码(例如 91
)?
我只想说,这个问题变成了一次有趣的学习冒险。但是....
您正在使用已弃用的 API。
事实证明 KeyboardEvent.keyCode 已被弃用一段时间。因为它使用十进制版本的 ASCII。正确的代码实际上是 event.Code
。但这不是你想要的。
要获取 ascii 码,您可以使用 event.key.charCodeAt()
这确实有一些缺陷,因为当您按下 shift 时它会报告 S
。但是你可以用event.location
判断这个键是不是特殊的控制键。零是标准键,1-3 是特殊位置(我认为)。
document.addEventListener("keyup", function(e) {
document.querySelector(".key").innerHTML = e.key;
document.querySelector(".keyCode").innerHTML = e.code;
document.querySelector(".ascii").innerHTML = e.key.charCodeAt()
document.querySelector(".UTF").innerHTML = String.fromCharCode(event.key.charCodeAt());
});
code {
background-color: #e2aec8ab;
;
border: solid 1px gray;
border-radius: 3px;
padding: 0 .5em;
min-height: 1em;
min-width: .2em;
margin: 0 .1em;
}
.output {
margin: 2em;
border: solid 1px lightgray;
border-radius: 3px;
background-color: rgba(200, 250, 230, .3);
padding: 1em;
}
Type here. Try some alpha letters as well as special keys like <code>`</code>
<code>-</code>
<code>=</code>
<code>[</code>
<code>]</code>
<code>[ENTER]</code>
<code>;</code>
<code>'</code>
<div class="output">
You typed <code class="key"></code> which is Javascript <b>keyCode</b> <code class="keyCode"></code>, in ASCII that would be <code class="ascii"> </code> which is <code class="UTF"></code>
</div>