テキストエリアでのファンクションキーの無効化

javascriptで、テキストエリアに入力した文字に対する、
ファンクションキーでの文字変換を無効化したいですが動作しません。

下記、試しているコードになります。
よろしくお願いいたします。

<html>
<head>
<title>ファンクションキーを無効にする</title>
<script language="JavaScript" type="text/JavaScript">
<!--　　
function noenter() {
return (event.keyCode == 112) ? false : true;
return (event.keyCode == 113) ? false : true;
return (event.keyCode == 114) ? false : true;
return (event.keyCode == 115) ? false : true;
return (event.keyCode == 116) ? false : true;
return (event.keyCode == 117) ? false : true;
return (event.keyCode == 118) ? false : true;
return (event.keyCode == 119) ? false : true;
return (event.keyCode == 120) ? false : true;
return (event.keyCode == 121) ? false : true;
return (event.keyCode == 122) ? false : true;
return (event.keyCode == 123) ? false : true;
}
// -->
</script>
</head>
<body>
<input type="text" onkeydown="return noenter();">
</body>
</html>

m.ts10806

2018/06/25 06:58

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

m.ts10806

2018/06/25 06:58

「うまく動作しない」「うまくいかない」では何が起きているか伝わりません。「○○のようになるはずなのに××となってしまう」のような形で「ゴール」と「現象（エラーメッセージなども含む）」を明確にしてください。https://teratail.com/help/question-tips#questionTips3-4-1

m.ts10806

2018/06/25 07:03 編集

もし提示コードがそのままでしたらコード内に全角スペース入り込んでますが大丈夫ですか？

行動規範の内容に同意します

回答1件

ベストアンサー

残念ながら今のコードでは最初のevent.keyCode == 112の時点でF1であってもなくても必ずreturnしているため、F1以外を押されたときにチェックされません。

下記のようにブラックリスト的に無効化するキーを配列で持っておき、
押したキーの中に対象のキーがあったときのみreturn falseとするのが良いでしょう。
（無効化したい対象が増えたときに配列に値追加するだけで良いので。

js
1var false_keys = [112,113,114,116,117,118,119,120,121,122,123];
2function noenter() {
3 if (false_keys.indexOf(event.keyCode) >= 0){
4     return false;
5 }
6}

投稿2018/06/25 07:11

m.ts10806

総合スコア80850

spim

2018/06/25 07:19

mts10806様ご回答いただきありがとうございました。ご教示いただいたコードを試しました。テキストエリアに文字を入力してファンクションキーを押すと文字が変換されてしまいます。こちらの対処方法をご教示いただければと存じます。よろしくお願いいたします。

m.ts10806

2018/06/25 07:24

未確定の状態からF7～F10あたりですかね。未確定の状態はinputのonkey～～イベントでは拾えないからだと思います。 inputのonkeyでなく、画面自体のonkeyイベントを拾うという手がないわけではないですが、それでも想定通り動くか分かりませんし、ＵＩ上好ましくありません。 ※そもそもファンクションキー無効というのが何を目的としたものなのか分かりませんが　文字変換まで無効にしてしまうので要件を考え直した方がいいかもしれません

spim

2018/06/25 08:27

mts10806様ご回答いただきありがとうございます。＞未確定の状態からF7～F10あたりですかね。その通りになります。＞未確定の状態はinputのonkey～～イベントでは拾えないからだと思います。承知いたしました。＞nputのonkeyでなく、画面自体のonkeyイベントを拾うという手がないわ＞けではないですが、＞それでも想定通り動くか分かりませんし、ＵＩ上好ましくありません。こちらの方法をご教示いただけないでしょうか？よろしくお願いいたします。＞※そもそもファンクションキー無効というのが何を目的としたものなのか＞分かりませんが＞　文字変換まで無効にしてしまうので要件を考え直した方がいいかもしれ＞ません入力フォームで、ユーザーに文字変換を行わせないためです。全角や半角など固定のものを入力いただいて、ファンクションキーでの変換を防ぐためになります。よろしくお願いいたします。

m.ts10806

2018/06/25 13:57 編集

＞入力フォームで、ユーザーに文字変換を行わせないためです。それなら、変換を行わせないのではなくtypeによる制御やバリデーションによる入力チェックで弾くべきと思います。 Fキー無効はあまり意味がありませんし仕様的にユーザーのストレスにしかなりません。半角英数しか入力させないとかそういう制限があるのでしたら尚更です。「やりたいことをユーザーに押し付ける」のではなく「自然な形でユーザーに適切な値を入力してもらう」形にシフトしてください。ヘルプ文言やプレースホルダーで「半角英数のみ」など注記をしておきバリデーションする形がより自然です。

spim

2018/06/26 04:50

mts10806　様ご回答いただきありがとうございました。自然な形でユーザーに適切な値を入力してもらうよう、考えを改めたいと思います。ご意見ありがとうございました。

m.ts10806

2018/06/26 06:10

そうですね。 UI設計は考慮することが多いですが、ルールが多すぎるとユーザが窮屈になり、少なすぎると脅威に晒されやすくなり運営側のリスクが高まるバランスが難しいところですが、それも要件により、変動していくものなので、日々調整していくものと思います。

行動規範の内容に同意します