- PR -

event.keyCode229について

1
投稿者投稿内容
未記入
会議室デビュー日: 2008/09/28
投稿数: 3
投稿日時: 2008-09-28 05:15
Javascriptでの質問です。

テキストボックス内に文字が入力されたときonkeydownイベントを発生させ
入力された文字の種類によって入力された文字をそのまま残す(半角数値の場合)
or
入力中の文字を削除する(半角カナ、半/全角アルファベット、"あ"〜漢字に至るまでの２バイト文字すべて)
と言った内容のプログラムを組んでいます。
条件の詳細は以下の通りです。

・F1〜F12、BSやDEL、上下左右の矢印キー、キーボード左上の[半角/全角]キーなど、文字入力でないものは有効にしたい
・テンキーは0〜9及びNumLockは有効、/*-+.は無効にしたい
・最もポピュラーな「IME制御」方法を用いる事は回避したい(相手の環境を変化させてしまうプログラムの類であるため・・・と言うかこの方法で妥協できるなら質問をしていないと言う意図を汲み取っていただければ幸いです)
・数字以外の文字が入力された場合、テキストボックス内の全ての文字をクリアにするのではなく、入力された文字のみを削除(無効)にしたい

この条件下で実際組んでいるプログラムは以下の通りです。

function CodeInt(){
var HanNum = "0123456789";
var HanKat = "ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜｦﾝｧｨｩｪｫｬｭｮｯｰ､｡｢｣ﾞﾟ･";
var Code = event.keyCode;
var CharCode = String.fromCharCode(event.keyCode);
if(
Code == 16 || //シフトキー
Code == 17 || //Ctrlキー
Code == 18 || //Altキー
　　(中略)
Code == 145 || //ScrollLockキー
Code == 240 //CapsLockキー
)
return;
else if(
//入力文字が半角カナの場合
HanKat.indexOf(CharCode) >= 0
)
event.keyCode = 40;
//入力文字が２バイト文字の場合(この制御が現在曖昧です)
else if(
Code == 229
)
event.keyCode = 8; //8はBSです
//上記以外で、半角数字ではない半角文字の場合
else if(
HanNum.indexOf(CharCode) < 0
)
event.keyCode = 40;
}

ここでクセモノなのはevent.keyCodeで数値229を引いてきた場合の処理についてです。
IME制御を行わないと言う条件ですので、使い手がIME「あ 般」の状態で入力を行うと、値が必ず229になってしまい、「１」から変換をかけて半角の「1」にしても、数値が入力されたとみなすことができなくなってしまっている状態です。
∴変換で半角数値にしたにも関わらず、入力文字が削除されてしまいます。

また、使い手が[半角/全角]キーを押して「 A 般」にしようとした際にも229が返されてしまうため、同テキストボックス内に既に文字が入っている場合、カーソルのある一文字前の文字が
else if(
Code == 229
)
event.keyCode = 8;
の処理によって削除されてしまいます。

この問題を回避したいのですが、不可能でしょうか？
上級者様による返答をお待ちしております。

なお、現在最優先事項としてこの問題を回避したいため、現在のところ
・コピー＆ペーストに対する処理
・環境IE6以外のブラウザでの処理
これらは、ひとまず考えない方向でお願いいたします。

過去記事でとても似た感じの質問がありましたのでＵＲＬを載せておきます。
(当方の意図する回答はここにはありませんでした)
http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?forum=7&topic=23891

[ メッセージ編集済み 編集者: 未記入 編集日時 2008-09-28 05:26 ]
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-09-28 15:40
コード:
<script>
window.onload = function() {

   var $ID = function(id) { return document.getElementById(id) }
   
   $ID("OK").onkeydown = function(e) {
      e = e || event;
      var keyCode = e.keyCode;
      var keyFace = String.fromCharCode(keyCode);
//alert(keyCode);
      if (keyCode < 0x20) return true; //BS,TAB,etc...
      if (keyCode == 46) return true; //DEL
      if (keyCode >= 37 && keyCode <= 40) return true; //上下左右矢印
      if (/[0-9]/.test(keyFace)) return true;
      if (keyCode >= 112 && keyCode <= 123) return true;//F1-F12
      if (keyCode == 229) return true; //半角／全角
      e.returnValue = false;
      return false;
   }

}

</script>

<body>
<input type=text id="OK" />
</body>



上級者ではありませんが、動く具体例をお願いします。
書いてあることが若干意味不明です。

未記入
会議室デビュー日: 2008/09/28
投稿数: 3
投稿日時: 2008-09-28 20:14
返答ありがとうございます。

>動く具体例をお願いします。
たとえばテキストボックス内には「点数」しか入力できないようにしたい状態です。

名前　　点数　　ランク
Aさん 　[100]　　　A
Bさん　 [　　　]
Cさん　 [　　　]

のように画面が存在し、Bさんの点数入力からフォーカスが離れた段階で、即座にランクを表示させたいのです。
[半角/全角]キーの操作は有効に、全角文字の入力は無効にしたいのですが

>if (keyCode == 229) return true; //半角／全角

これですと、全角文字を入力されてしまった場合にも[半角/全角]キーを押された時と同じ動作になってしまいますよね。
コードが229かどうかと言う判断だけでは一蹴できなくて困っている状態です。
([半角/全角]キーも全角文字の入力も、同じコード229であるためです)
回答いただいたのに申し訳ありません。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-09-28 21:58
コード:
<script>
window.onload = function() {

   var $ID = function(id) { return document.getElementById(id) }
   
   $ID("OK").onkeydown = function(e) {
      e = e || event;
      var keyCode = e.keyCode;
      var keyFace = String.fromCharCode(keyCode);
//alert(keyCode);
	window.status = keyCode + "=>" + keyFace;

	showDetail(e);
      
      if (keyCode < 0x20) return true; //BS,TAB,etc...
      if (keyCode == 46) return true; //DEL
      if (keyCode >= 37 && keyCode <= 40) return true; //上下左右矢印
      if (/[0-9]/.test(keyFace)) return true;
      if (keyCode >= 112 && keyCode <= 123) return true;//F1-F12
      if (keyCode == 229) return true; //半角／全角

      
      
      e.returnValue = false;
      return false;
   }
}

function showDetail(e) {
   var $ID = function(id) { return document.getElementById(id) }
	var ar = [];
	ar.push("<table border>");
	ar.push("<tr><th>Name</th><th>Value</th><th>Name</th><th>Value</th></tr>");
	var x = 1;
	for (var a in e) {
		if (x & 1) ar.push("<tr>");
		var v = typeof e[a] != "undefined" ? e[a] : "&nbsp;";
		ar.push("<td>" + a + "</td><td>" + v + "</td>");
		if (x & 1 == 0) ar.push("</tr>");
		x++;
	}
	if (x & 1 == 0) ar.push("</tr>");
	ar.push("</table>");
	
	$ID("detail").innerHTML = ar.join("\n");
}
</script>

<body>
<input type=text id="OK" />
<div id="detail"></div>
</body>



無理。
プロパティが無いから。

未記入
会議室デビュー日: 2008/09/28
投稿数: 3
投稿日時: 2008-09-29 01:12
度々ありがとうございます。

onFocus時に該当テキストボックス内のvalueを取得し、lengthを保有。(Before)
onkeydown時に再びテキストボックス内のvalueを取得し、lengthを保有。(After)
変換途中と変換済みの両方に適応させるため、onkeyup時にもlengthを保有。(After、Afterでなくとも良い)

onkeydown時とonkeyup時の両方に

else if(
　Code == 229 && Before >= After
)
　return;
else if(
　Code == 229
)
　event.keyCode = 8;

の処理を入れ、コード229の場合に文字が増えているか否かで[半角/全角]キーが押されているのか全角文字が入力されているのかを判断。
増えていなければ[半角/全角]キーが押されたとみなし、returnで脱出。
増えていればバックスペースで削除と言う手を取りました。

>無理。
>プロパティが無いから。

普通に考えて、やはりそうですよね。
どこを探してもIME制御を使えと言った回答ばかりでしたので半ば諦めかけておりましたところ、親切にアドバイスをいただき、ありがとうございました。
1

スキルアップ／キャリアアップ（JOB@IT）