入力モードを半角カナにするには


0   名前: 始まりの蒼 : 2008/03/25(火) 23:33  ID:4XG97o2a sub-3e
inputタグの入力欄にフォーカスが当たったとき、入力モードを「半角カナ」のみにするにはどうすれば良いでしょうか?

Javascriptで全角カナ→半角カナに変換する方法はあるのですが、入力した時点で半角カナになってほしいのでこの方法は使えませんでした。

どのようにしたらいいか手詰まりな状態なので何方かご教授お願いします。

1   名前: りれい : 2008/03/25(火) 23:33  ID:y0jdLHQ1 sub-tu
スタイルシートの設定になってしまいますが、こちらでよいですか??
http://www.tagindex.com/stylesheet/form/ime_mode.html

2   名前: aki : 2008/03/25(火) 23:33  ID:Ph6Bf8Q4 sub-HD
#半角カナとか特殊文字とかはあんまりよくないとされてるんですけどね。

ちなみにime-modeってIEのみじゃなかったでしたっけ。
参考リンクをFirefoxで試したら効いてないみたいでしたけど。

3   名前: りれい : 2008/03/25(火) 23:33  ID:y0jdLHQ1 sub-tu
あー、申し訳ありません。
ime-modeはIEが独自に追加したプロパティらしく、IEのみでした。
しかも、半角カナというのも半角英数だと勘違いしておりました。
本当にすみませんでした。。

4   名前: 4 : 2008/03/25(火) 23:33  ID:uE.f8aXp sub-cF
http://developer.mozilla.org/ja/docs/CSS:ime-mode
http://www.d-toybox.com/studio/weblog/show.php?mode=single&id=2007052300
https://bugzilla.mozilla.org/show_bug.cgi?id=279246

http://www.w3.org/TR/xforms/#mode
http://www.w3.org/TR/web-forms-2/#the-inputmode
http://www.formfaces.com/
http://code.google.com/p/webforms2/

5   名前: jax_6 ◆4YHFU8HpSy : 2008/03/25(火) 23:33  ID:5WwKRY4N sub-7c
>>4 とかぶってますが
http://www.tagindex.com/cgi-lib/q2bbs/patio.cgi?mode=view2&f=1601&no=4

ime-mode に対応していないブラウザについて。微妙な案ですが
>Javascriptで全角カナ→半角カナに変換する方法
ができるなら、fucus イベントでタイマーを仕掛けて、数コンマ秒おきに自動変換してあげればできますね。ひらがなでも全角カタカナでも変換しまくってしまう。(特に動作が遅くなったりはしませんでしたけどかなりウザかった。)

6   名前: jax_6 ◆4YHFU8HpSy : 2008/03/25(火) 23:33  ID:5WwKRY4N sub-7c
>>5 あ。>>3の通り ime-mode じゃ半角カナ制限はできないので ime-mode 云々は関係ありませんでした。

7   名前: DS : 2008/03/25(火) 23:33  ID:R27WuLsX sub-t1
半角カナという事なので、携帯用で利用するのかな?

Javascriptも検討している様なので、PC前提?

携帯用であれば、こんな感じで。
<input type="text" name="word" size="10" maxlength="50" istyle="2" mode="hankukakana">

キャリア別に異なるので、併記。

※docomo+au用
istyle="1" 全角かな
istyle="2" 半角カナ
istyle="3" 英字
istyle="4" 数字

※softbank用
mode="hiragana"  全角かな
mode="katakana"  全角カナ
mode="hankakukana" 半角カナ
mode="alphabet"  英字
mode="numeric"  数字

8   名前: aki : 2008/03/25(火) 23:33  ID:Ph6Bf8Q4 sub-HD
書いてみました。が、なんか微妙…?

WindowsXP
IE6とFirefox2で動作確認。
<html>
<head>
<script type="text/javascript">
    //フォーカス取得時
    function onFocusInput( src ) {
        src.prevVal = src.value;
    }
    //キーダウン時
    function onKeydownInput( event, src ) {
        if( event.keyCode == 229 ) {
            return;
        }
        var val = src.value;
        var pval = src.prevVal;
        if( (!pval) || (pval != val) ) { //valueが変わっている場合
            var han = toHankaku( val );
            if( val != han ) {
                src.value = han;
                src.prevVal = han;
            } else {
                src.prevVal = val;
            }
        }
    }
    //フォーカス喪失時
    function onBlurInput( src ) {
        var han = toHankaku( src.value );
        src.value = han;
        src.prevVal = han;
    }
 
    //==============================
    // 全角カナを半角カナに変換
    //==============================
    function toHankaku(motoText) {
        var han = "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンァィゥェォャュョ、。「」゛゜";
        var txt = "アイウエオカキクケコサシスセソタチツテトナニヌネノ";
        txt+= "ハヒフヘホマミムメモヤユヨラリルレロワヲンァィゥェォャュョ、。「」  ";
        var str = "";
        for( var i=0; i<motoText.length; i++ ) {
            var c = motoText.charAt(i);
            var n = txt.indexOf(c,0);
            if (n >= 0) c = han.charAt(n);
            str += c;
        }
        return str;
    }
</script>
</head>
<body>
 
<input type="text" onfocus="onFocusInput(this)" onblur="onBlurInput(this)" onkeydown="onKeydownInput(event,this)">
<input type="text" onfocus="onFocusInput(this)" onblur="onBlurInput(this)" onkeydown="onKeydownInput(event,this)">
 
</body>
</html>

つっこみお願いします。

9   名前: aki : 2008/03/25(火) 23:33  ID:Ph6Bf8Q4 sub-HD
>>0
> 入力モードを「半角カナ」のみにするにはどうすれば
あ、「のみ」か。すいません;

>>8 は「全角カナを見つけたら半角に強制変換する」スクリプトです。
んー、でもそれもちょっと改造したらできるかな…?

10   名前: jax_6 ◆4YHFU8HpSy : 2008/03/25(火) 23:33  ID:q8Jmr4PS sub-Q5
>>8
オオ・・
タイマーよりキープレスですね;

・私の(IE6 XPsp2)環境だと日本語入力モードで文字を打つと全部229になってしまいます。
・「バ」は「ハ゛」と打たないのでどうしましょう・・別に文字列を作りますか・・

11   名前: jax_6 ◆4YHFU8HpSy : 2008/03/25(火) 23:33  ID:q8Jmr4PS sub-Q5
あと、アクティブな変換可能状態のままスクリプトで書き換わると、次の文字を入力したときにおかしくなりませんか??(前のが消えちゃうことがある)いったんblurして書き換えてfocusしたりして非変換可能状態にするとかが必要?(その場合ローマ字入力でアルファベットだけ入力している時は発動しないようにする?)

# JavaScript 板や総合板じゃないのでアレですが・・

12   名前: aki : 2008/03/25(火) 23:33  ID:Ph6Bf8Q4 sub-HD
>あと、アクティブな変換可能状態のままスクリプトで書き換わると、次の文字を入力したときにおかしくなりませんか??(前のが消えちゃうことがある)

そうなんですよね…
ちょっと調べてみたんですけど、未確定文字を確定させる方法がわからなかったので
keyCode=229(日本語モードで入力中)の時はスルーさせて、
その後のEnterとか半角入力とか、onBlurのタイミングで全角カナ→半角カナにしてみました。

>「バ」は「ハ゛」と打たないのでどうしましょう・・

う、そうですね…
カナ変換の関数はその辺から拾ってきたやつなので、ちょっと直さないとですね…


というかそうか、ここはHTML板でしたね。
もうちょっと続けるならJavaScript板に移動したほうがいいかも。

13   名前: 13 : 2008/03/25(火) 23:33  ID:qzWZdGjy sub-Jt
HTML4 の必要十分条件:
・ページが何のルールに従いマークアップされているのか明示する(文書型宣言)
・ページには必ずタイトルを付ける(title 要素)

厳密型ではもう一つ:
・テキストを裸にしないこと(テキスト、インライン要素は有意味なブロック要素内に置くこと)

HTML4 の最重要ルールは、たったこれだけだ。いっそ、<html> だの <head> だの <body> だの、余計なものは書くな。
==日記==

* 2008 年 3 月 25 日

今日は特売日です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>日記</title>

<h1>2008 年 3 月 25 日</h1>

<p>今日は<input value="特売日">です。</p>

これは完全な HTML 4.01 文書だ。こう書けば、裸のテキストが「気持ち悪い」理由が何となく分かると思う。body、form、blockquote 要素直下に、テキストやインライン要素を置けない理由も同じ。

HTML4 なんて、たったこれだけのものでしかない。にもかかわらず、一番重要なものを覚えず、余計なものばかり詰め込むから、話がややこしくなる。これは、ほとんどの HTML 解説書がやらかしている。



技術的な関心からやってみるのは構わないんだが、IME の状態を変更することと、ユーザの入力内容をリアルタイムに強制置換することとは、全くの別物だ。後者がどれほど恐ろしい行為であるか、自覚しているだろうか。実運用上は置換ボタンを用意するか、単に警告を出すだけの方が良い。
http://www.w3.org/TR/WCAG20/#minimize-error

IME に関しても、Fx3 の ime-mode の実装者自身がこう言っている(>>4):
もちろん、このプロパティを一般的なWebページで使うことは推奨されない。このプロパティはイントラネットのアプリケーション等、ユーザがそのフォームの仕様を熟知している場合を除き、使用されるべきではない。ユーザは一般的にIMEの状態(ON/OFF)を記憶しており、その状態を逐次確認しながら利用することはないと思われる。そのため、ユーザの記憶と実際の状態に齟齬が発生する可能性のあるactiveとinactiveの利用は慎重に行われるべきである。

また、メールアドレスの入力欄等、ASCII文字しか使えないエディタでのIMEの無効化も推奨されない。ユーザによってはメールアドレス等をIMEの辞書に保存し、利用している可能性があるためである。このような利用方法をとっているユーザにとっては「余計なおせっかい」でしかない。

Webページの作者はこのプロパティをフィルタに使えるものと考えてはいけない。Geckoは貼り付け(ペースト)を利用することで、IMEを利用しなくてはいけない文字であってもIMEが無効なエディタに入力可能である。

IME の状態変換が有効なのは、携帯など操作系が非力であるか(>>7)、Web アプリなど操作系統が比較的統一されているものか、もしくは type="password" など入力結果が見えない場合に限る。そうでない場合は、ユーザの混乱を招かぬよう、かなり慎重に配置しなければならない(それに、IME に誤変換を記憶させてはユーザに申し訳が立たない)。半角カナの件も、全く同じことが言える。通常はヒント&警告だけで十分だ。

なお、IME が有効な状態での Key(board)Event は、ブラウザだけでなく入力ソフト、OS その他によっても相当違う。この辺の情報をまとめてくるなら、大変ありがたい。

14   名前: 14 : 2008/03/25(火) 23:33  ID:TwDxXnkP sub-rt
>>13 は強く書き過ぎたので念のため、私はリアルタイム監視自体を否定しているわけではない。また、UNIX のある種の入力ソフトのように、半角カナを入力しづらい環境のために、変換ボタンを設けるのは良いと思う。ただ、リアルタイムでユーザの入力を強制置換することに対しては反対だ。

私の回答としては、携帯なら >>7 のように特殊属性を使え、そうでなければデバイス・OS・ソフトに依存するのでヒントか警告を出すのが無難、あるいは >>8 を拝借して変換ツールを作れ、と。

15   名前: jax_6 ◆4YHFU8HpSy : 2008/03/25(火) 23:33  ID:5WwKRY4N sub-7c
>>12 なるほど!そういうことでしたか。リアルタイムに変えるわけではなくて、なんかした時に一気に変えるということですね。
--------------------------------------------------------

で、ほぼ個人的興味ですが作ってみました。>>13にもひっかかりますが多少は考慮してます。変換テーブルは手抜きでサ行までしか書いてません。
# >>13でもありますが keydown とか keyup ってやっかいですね。(http://www.seo-equation.com/html/html/onkeydown
# とすると>>8で日本語入力スルーしてたのはこのためでもあるのかな・・
# やはりタイマーで・・・と、無駄にぐちゃぐちゃになっていくのでやめます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
	<title>自動で半角カナ入力にするフォーム</title>
<script type="text/javascript">
//@cc_on
window. /*@if (@_jscript) attachEvent ('on' + @else@*/
 addEventListener (/*@end@*/ 'load', function(){
	Limit.initialize();
}, false);

var Limit = {
	initialize :
		function(){
			////////////↓チェックする対象を配列で列挙↓/////////////
			this.targets = new Array( document.forms[0].elements[0] );
			/////////////////////////////////////////////////////////
			var I = this.targets.length;
			for(var i=0; i<I; i++){
				this.targets[i]./*@if (@_jscript) attachEvent ('on' + @else@*/
	 			 addEventListener (/*@end@*/ 'focus', this.focusAction, false);
	 			this.targets[i]./*@if (@_jscript) attachEvent ('on' + @else@*/
	 			 addEventListener (/*@end@*/ 'blur', this.blurAction, false);
	 			this.targets[i]./*@if (@_jscript) attachEvent ('on' + @else@*/
	 			 addEventListener (/*@end@*/ 'keyup', this.doCheck, false);
	 			//↑自動変換していることをユーザに認識させるためにkeyupにしてチラ見せ
			}
			Limit.changeTableLength = Limit.changeTable.length;
		},
	targets : "",
	flg : true,
	changeTable : 
		[
			['あ','ア','ア'],['い','イ','イ'],['う','ウ','ウ'],['え','エ','エ'],['お','オ','オ'],
			['か','カ','カ'],['き','キ','キ'],['く','ク','ク'],['け','ケ','ケ'],['こ','コ','コ'],
			['さ','サ','サ'],['し','シ','シ'],['す','ス','ス'],['せ','セ','セ'],['そ','ソ','ソ']
		],
	changeTableLength : 0,
	focusAction :
		function(){
			this.flg = true;
		},
	blurAction :
		function(){
			this.flg = false;
		},
	doCheck :
		function(e){
			if(this.flg){
				var targetE = e. /*@if(@_jscript) srcElement @else@*/ target /*@end@*/;
				var str = targetE.value;
				var newStr = "";
				var leng = str.length;
				var hitFlg = false;
				for(var i=0; i<leng; i++){
					var c = str.charAt(i);
					for(var j=0; j<Limit.changeTableLength; j++){
						if(c==Limit.changeTable[j][0]){
						//全角平仮名だったら変える
							c=Limit.changeTable[j][2];
							hitFlg = true;
						}else if(c==Limit.changeTable[j][1]){
						//全角片仮名だったら変える
							c=Limit.changeTable[j][2];
							hitFlg = true;
						}
					}
					newStr += c;
				}
				if(hitFlg){
					targetE.blur();
					targetE.value = newStr;
					targetE.focus();
				}
				targetE=str=newStr=leng=hitFlg=null;
			}
		}
}
/*****************************************************************************
 * 残課題:数字や英字は入力できてしまう。
 *    (もちろんsubmitでのエラーチェックはある前提)
 * →利便性を求めるだけなら問題も必要もなさそう。
 * →ほぼエラーチェック代わりに、がっちり限定したいなら要改良。
 *(ローマ字入力があるので、途中で英字がでても発動させないようにする必要があるが
 *  対処は難しい??)
 * 【重要残課題】:Opera9 で動作しない。Firefox2 で動作がリアルタイムにならない。
 *        (参考→ http://www.seo-equation.com/html/html/onkeydown )
 *****************************************************************************/
</script>
</head>
<body>
<form action="#">
	<p>必ず半角カナで入力して下さい:<input type="text">※全角かな・全角カナで入力しても自動変換します</p>
	<p>必ず半角カナで入力して下さい:<input type="text">※制御無し</p>
	<input type="button" value="決定">
</form>
</body>
</html>

---------------------------------------------------------
>>0 遊び場にしてごめんなさい m(_ _)m

16   名前: sss : 2008/03/25(火) 23:33  ID:8WL/QS6j sub-.G
どうせ強制で置き換えるのならサーバで置換すればいいのでは。
半角カナでなければならない理由がわからないし、よしんばその理由があったとしてもクライアントで処理させる理由がわからない。

通常のテキストデータとしてクライアントからサーバに送付し、サーバではそのまま保管する。
表示するなどのデータの使用時にサーバでデータを整形する。

というのが普通の考えだと思うのだが。

17   名前: jax_6 ◆4YHFU8HpSy : 2008/03/25(火) 23:33  ID:5WwKRY4N sub-7c
>>16

>半角カナでなければならない理由がわからない
>>0に>入力モードを「半角カナ」のみにするにはどうすれば良いでしょうか?
とあります。

>クライアントで処理させる理由がわからない。
>>0に>入力した時点で半角カナになってほしい
とあります。あとは微力ながらサーバの負荷軽減とか・・

一覧へ戻る