文字数制限付きテキストボックス

Question

普段バッチ処理を書いていて、javascriptはほぼ初心者です。

・全角2Byte
・半角(カナを含む)1Byte
上記の計算で指定バイト数までの入力制限付きテキストボックスを作ろうとしています。

それでonkeyupに下記のコードを書いたのですが、

• 日本語入力中は指定バイト数を超えた時にバッファ上?の未確定文字列がキーを押すとちらちら出てくる
• 確定済みの文字列がある状態で、指定バイト数を超えて日本語入力を続けると確定済み文字列が消えることがある

上記の問題が出ています。

0.日本語入力中の場合、変換確定後のみsubstringを実行する(確定した文字列は消えない)
0.日本語入力中に指定バイト数を超えた場合はその時点で確定してそれ以上の入力をさせない
上記どちらかのような挙動にするにはどうしたらよいでしょうか?

※できればonkeydownイベントを使わずonkeyupイベントだけで完結させたいです(テストの兼ね合い)。
※とりあえずIEのみがサポートブラウザなのでIEで動けばいいです。

function setOnKeyUpMaxByte(obj, maxByte) 
{ 
    var str = obj.value.toString();
    var len = str.length;
    var cod = 0;
    var bytLen = 0;
    var cutFlg = 0;
    
    for (i = 0; i < len; i++) {
    
	    bytLen += 2;
	    cod = str.charCodeAt(i);
	    
	    // 半角文字(※半角カナ含む)
	    if ((0x20 <= cod && cod <= 0x7e) || (0xff61 <= cod && cod <= 0xff9f)) {
		    bytLen--;
		}

		if (bytLen > maxByte) {
		    obj.value = str.substring(0, i - 1);
		    break;
		}
    }
}

---

追記

• 業務システムなのでFW外からの不特定多数のアクセスは考慮外とさせてください
• コピペ対策などは既にあって今回問題の発生した直接入力の改修が今回のタスクです

Answer 1

この手のことはみんな考えるものですが、あまりうまくいったという話は聞きません。

1.Copy &Pasteで入力される場合対応できない。
2.画面経由ではない保存動作をエミュレートされる可能性がある。
3.最大文字数がより小さいものに変わったとき、それ以前に保存されていた
新しい最大長を越える長さのデータを元データとして表示しようとしてバグる。

いずれにせよ、ブラウザ、Webサーバ、DB I/Oなどの各フェーズでバリデーションチェックは
必要なので、keyup/changeイベントで文字数を出して、狙う文字数を越えていた場合は
色を変えるなどしておいて、実際の文字列カットなどは
保存時なんかにチェックして実行するのが主流じゃないでしょうか。

また、IMEの確定イベントを確実にすべて確保するのは難しいようです。

1. 未確定状態の文字があったとき、ウィンドウがフォーカスを失うと確定される。
   例：他のウィンドウにフォーカスを充てる。または最小化→最大化する。
2. 変換→そのまま次の文字を入力→ESCでIME編集モードを抜ける

ですから、多少はユーザビリティの改善のために行うのはいいかもしれませんが、
バリデーションチェックを軽減する目的には使えません。

なお、IMEをoffにする環境では多少状況は変わります。(数字入力など。)

Comments

[kutsulog]

回答ありがとうございます。

質問文での記述が漏れましたが、
受託案件で対応していまして
一通り出来上がった業務システムで挙動がおかしいと指摘された
直接入力の改修が今回のタスクです。
（もともとは、onkeyupでMaxLengthを変更していました)

ご提案のあった色の変更で顧客に納得してもらえるとありがたいのですが。。。

Answer 2

jQueryのプラグインですが、こういう物もあるようです。リンク
jQuery不可でも、IEでのkeydown,keyupの調査履歴も上記のページに書かれていますので、発想の部分だけ拝借してjavascriptで自前の関数を組むこともできそうですね。

Comments

[kutsulog]

ご回答ありがとうございます。

レンダリングIE10限定ですが、
下記のような感じでできました。

// 確定する前の移動対策
function setOnBlur(obj, maxByte){
var str = obj.value.toString();
var len = str.length;
var bytLen = 0;

for(var i = 0; i < len; i++){
bytLen += 2;
cod = star.charCodeAt(i);

if((0x20 <= cod && cod <= 0x7e || (0xff61 <= cod && cod <= 0xff9f)){
bytLen--;
}

if(bytLen > maxByte){
obj.value = str.substring(0,i);
obj.style.backgroundColor = '';
break;
}
}
}

var pressedKey = 0;
// 入力中制御
function set OnKeyUp(obj, maxByte){
var str = obj.value.toString();
var len = str.length;
var cod = 0;
var bytLen = 0;
var cutFlg = false;
var range = document.selection.createRange();
range.moveStart("chracter", -obj.value.length);

for(var i = 0; i < len; i++){
bytLen += 2;
cod = str.charCodeAt(i);

if((0x20 <= cod && cod <= 0x7e || (0xff61 <= cod && cod <= 0xff9f)){
bytLen--;
}

if(bytLen > maxByte){
cutFlg = true;
break;
}
}

if(cutFlg && pressedKey == event.keyCode){
obj.value = str.substring(0,i);
cutFlg = false;
}

if (cutFlg){
obj.style.backgroundColor = '#FF99FF';
}else{
obj.style.backgroundColor = '';
}

pressedKey = event.keyCode;
}

// 日本語入力判定
function onKeyDown(obj){
pressedKey = event.keyCode;
// テストが面倒なif文たっぷりのコード
}

IE10限定(IE9以下だと日本語確定時の2回目のkeyUpイベントが起こらない)なので
見た目が変わるなどの問題が悩ましいところです。

この案と、色を変えるだけの案と、blurで強制的に確定させる案で提案してみようと思います。