2012/03/22

[jQuery]テキストボックスへの「文字入力」の検知

  1. changeイベントを拾う…文字入力ではなくテキストボックスの入力終了でファイアするイベント。ざっくり表現すると、フォーカスアウト時。
  2. キー入力イベント(keypress, keyup, keydown)を拾う…キーボード押下時にファイアするイベント。テキストボックスに文字が入る前を取れる。
後者は、ブラウザ間の差が激しい。差については、下記が詳しい。
JavaScript Madness: Keyboard Events
キーボードからの、タブやカーソル移動、消去などを除いた「文字入力」だけを拾う手段として 下記の形で書いてみた。 ただし、ペーストや日本語変換入力などは検知できない。
// keypressイベントで発火させた後のコード
// @param event {Object} eventObject
// @return {Boolean} true:「文字入力」は行われていない、false:「文字入力」が行われた。


// キーコードの取得
var code = event.which ? event.which : event.keyCode ? event.keyCode : event.charCode ? event.charCode : 0 ;
//
if( (navigator.userAgent.indexOf('Gecko')) || (navigator.userAgent.indexOf('Presto')) ){
    // Firefox and Opera send a code of special key whe user press it.
    // below statements avoid prevented some codes sended.(arrows, delete, home, end, backspace, tab)
    if( (code==37) || (code==38) ||(code==39) ||(code==40) ||(code==46) ||(code==36) ||(code==35) ||(code==8) ||(code==9) ){
      return true;
    }
}
if( (!code) || (code < 32)) ) {
  event.preventDefault();
  return false;
}

日本語変換を検知するのは無理か。 Enter確定やスペース確定を拾うとそれっぽい気がするしたけど でも、普通目的のEnterと変換のためのEnterを分離しきれる気がしない。 あと、日本語IMEをデフォルトから変更されたりしたらお手上げじゃない?

ペーストについては、pasteイベント拾いそうなものだが、 こいつは入力確定前でかつ、何が入力されようとしているかは検知できない。 なにやら、Flashを埋め込んで連携することで可能になるようだが。 まぁ、ブラウザでWeb閲覧するごときでクリップボードの内容なんか引っこ抜かれちゃ困る。 世の中に何人かはパスワード入力でコピペってる人がいるんじゃない?

理想的には、「ペースト操作が完了してブラウザが文字列受取」 ~ 「文字列をテキストボックスに描画」の間がとれればと思うけど、 それが可能な仕組みになってるのかどうかすらわからん。

2012/03/20

[jQuery.inplim]inputの入力文字制限

入力文字種制限jQueryプラグインを作りかけている。 日本語やその他2ストローク入力言語に対応できればなーと思っているけど、 発生させるキーコードのブラウザ間の違いがあるので、そもそもに原理的に不可能なのか? と思いつつ、(Windows IMEで言うところの)直接入力だけ作成。
github:jquery.inplim.js
引数の名前やら中の制御やらについては、いろいろ潜んでいるので余暇でメンテしていきたい。 なんたってテストコードが入ってない体たらく。 jQueryプラグイン作成、githubの使用、gitなど慣れないもの満載だったので、徐々に覚えていきたいところ。
$('#numeric').inplim({regexStr:'[0-9]', jp:true});
$('#alphabet').inplim({regexStr:'[a-zA-Z]', jp:true});
$('#alphanumeric').inplim({regexStr:'[a-zA-Z0-9]', jp:true});
$('#mail').inplim({regexStr:'[a-zA-Z0-9-_\.@]', jp:true});