JavaSc「-」を入力して「-」を表示しないとは

質問

document.body.onkeydown=pressKey;
function pressKey(e)
{ keyNum=e.keyCode;
if(keyNum>=65 && keyNum<=90){ keyNum=keyNum+32;}
keyChar=String.fromCharCode(keyNum);
document.getElementById("area").innerHTML=keyChar;
}
<div id="area"></div>

HTML、JavaScriptのこんな感じのプログラムで
「a」を入力するとキーコードが発生するので
（ただし、ローマ字は大文字の「A」がヒットするので）
拾って（大文字なら小文字に変換する）
文字に変換して <div id="area"></div> の内容として
タイプするとリアクションでその場で表示できます。
「a」と打つなら「a」が現れる仕掛けです。

同じことがハイフン入力でできません。
（ノートPC使用、「0」の隣。）
キーコードをアラート表示すると189でした。
これはアスキー文字コード128以上の一覧にあって
文字としては1文字で1/2を表示するというものでした。

タイピングソフトを自作してこれに気付きました。
ハイフン入力にその表示が正常にできないということは
このままではお題に伸ばし棒入りの文章が使えません。
英文例題に伸ばし棒（半角ハイフン、コードは45）があっても
入力はコード189を発生するので一致判定ができません。
というか、入力動作で
if(keyNum==189){ keyNum=45;}
ハイフンのコード45に修正する作業をわざわざ差し込みました。

動作的にはこの対応で完成させたのですが、
ハイフンを入力したらハイフンキーのコード45を発生せずに
他のコードの発生させる機種は、
この仕掛けに何の意味やメリットがあるのか思い当たりません。
設定異常の症状でしょうか？

回答No.1

chie65536（@chie65535） · ベストアンサー

＞設定異常の症状でしょうか？

javascriptのonkeydownは押されたキーの「キー番号（アスキーコードとは異なるコード）」をkeyCodeに返す仕様になっています。

この「キー番号」は、フルキーボード側の０～９、A～Zのキーについて、０～９、A～Zのアスキーコードと同じ数値になるようにキー番号を合わせてあります（番号をアスキーコードに似せてあるだけで、アスキーコードが返されている訳ではない事に注意すること）

それ以外のキーは「アスキーコードと異なるコード」が返って来ます。

例えば、テンキーの「０」（ゼロ）は９６、フルキーの「０」（ゼロ）は６４を返すようになっています。

例えば、テンキーの「－」（マイナス）は１０９、フルキーの「－」（マイナス）は１８９を返すようになっています。

この時「＝」（SHIFT押しながら「ー」キー）は「－」キーと同じ番号の１８９になります。

ですので、onkeydownは「－」と「＝」を区別出来ません。どちらも「１８９」が返されます。

「押したキー入力を、アスキーコードで知りたい」と言う場合は「onkeypress」を使います。

onkeypressであれば「ー」キーは４５（アスキーコードの「-」）を返し、「＝」キーは６５（アスキーコードの「=」）を返し、「a」は９７、「A」は６５のように、大文字も小文字も区別して返されます。

以下のサイトで「onkeydownとonkeypressの違い」を比較できます。
https://web-designer.cman.jp/javascript_ref/keyboard/keycode/

＞この仕掛けに何の意味やメリットがあるのか思い当たりません。

onkeydownは、実は「javascript仕様での、キーの物理番号」を返しています。

「キーの物理番号」を返すので「テンキーの数字キーと、フルキーの数字キー」を区別できます。同様に「テンキーの＊と、フルキーの＊（：）」も区別できます。

また「SHIFTキーを押しただけ」とか「CTRLキーを押しただけ」も判ります。

これが出来るのは「アスキーコードとは異なる、キーの物理番号」を返すようになっているからです。

お礼

私が参照した教本では、機能が「どんなコード規格でやるものなのか」
説明はありませんでした。
キーコードがアスキーコードとどう違うものなのか
わかっていないと手ごわかったです。
なかなかたどり着けなかった情報でした。
非常に助かります。すっきりしました。
ありがとうございました。