入力文字のチェック


「テキストエリアの文字数」の中で、送信用のテキストエリアに入力された文字数を簡単にチェックする方法を紹介しました。 アンケートを初めとして、文章入力用のテキストエリアを使用しているホームページはとても多く、また入力する文字数を制限しているところも結構あるのですが、アクセスした人のためにこうした配慮をしているサイトが(いまだに)ほとんど見当たらないのは、あきれてしまいます。

文字数を手作業でチェックするのは意外に手間がかかりますし、それを怠ったばかりに投稿者も、またそれを受けた側も面倒なことになるというのは、いかがなことでしょうか。 JavaScript は、ただお遊び的な目的だけにでなく、そうした実用的な配慮にも使用できるし、また使用してほしいものです。

ところで送信用のフォームにはもう1点、問題があります。多くの場合、名前・ハンドルや、住所、文などは日本語用2バイト文字を用いますが、メールアドレス、HPのURL、生年月日、電話番号などは英数字(1バイト文字)と記号を用います。 日本語を入力するときにはIME(input method editor)を起動しますよね?でも半角英数字の入力の時は、これは必要ありません。 通常、アプリケーションソフトでは、半角英数字入力用のテキストボックスにフォーカスが移ると日本語IMEを起動しない(すでに起動しているときは、これを隠す)プロパティ設定になっていますが、ブラウザ上の入力フォームではこうした設定は(今のところ)出来ません。 わずかにパスワード・オブジェクトを使用した場合にのみ、そうした設定が行われますが、パスワードオブジェクトは文字を **** のようにアスタリスク表示するため、パスワード以外の入力フォームには適していないと言えます。

このため、ともするとユーザは名前などを全角文字で入力した流れで、半角英数字を入力すべき所にまで全角英数字を入れてしまう恐れがあります。 そのまま送信されると受け取った側はこれを半角文字に書き直さなければならなくなり、困りますね。「・・・は必ず半角英数字を入れて下さい」という但し書きも見かけますが、もし半角英数字以外が入力されたら警告するプログラムが作れたら、ユーザのうっかりミスのまま送信されるエラーを防げることになるでしょう。

実はこれは割と簡単なプログラムで出来てしまいます。JavaScript の escape() メソッドは文字をアスキーコードに変換し、unescape() メソッドはアスキーコードを文字に変換しますが、但し半角英数字と @、/、-、+ のような一部の記号はアスキーコードに変換しないのです。 「文字化けしたアンケートの解読」で問題にしたような送信メッセージの文字化けが、半角英数字では起こらないからです。 この特質を応用するのです。

下に3つの入力用テキストボックスがあります。左に適当な漢字の名前、真ん中に適当な数字、右に適当な英単語を入れて下さい。3つとも問題なく入力できたら「クリア」ボタンを押します。 次に同じことをもう一度、但し真ん中の数字を全角文字で入れて下さい。

名前   数字   英語


どうですか?数字を全角文字で入れると、警告表示が出て、そこだけクリアされますね。数字の代わりにどんな全角文字を入れても同じです。 これは真ん中のテキストボックスに文字を入力し、そこからフォーカスが離れたとき(onBlur)、Check() という関数を呼び出してチェックしているのです。 この関数はHTMLのヘッダー部で次のように定義します。(ここのフォーム名を "test"、数字入力欄の NAME を "Suji" とします。)

function Check() {
with(document.test.Suji)
{
log1 = value;
log2 = escape(log1);
if(log1 != log2)
{
alert("真ん中の入力欄に数字を半角で入れて下さい。");
value="";
focus();
}
}
}

escape() メソッドによる変換をパスできるのは、半角英数字のほか、/、@、-、+、.、*、_ の7種類の半角記号です。 ですから 1998/06/31 のようなスラッシュを含む年月日、support@umechando.com のようなアットマークとピリオドを含むメールアドレス、000-123-4567 のようなハイフンを含む電話番号はOK、ということになります。

しかしそのほかは、たとえ半角記号であってもアスキーコードに変換され、Check() 関数をパスしません。ですから http://www.momotaro.com/~kiji/oni.cgi?num=2 のように : や ~ や ? や = を含むURLなどはダメ、ということになってしまいます。 またスペースも1つの文字と見なされてアスキーコードに変換されますので、やはり Check() 関数をパスしません。

この問題を解決するには、パスさせたい文字を含む配列を作り、もしその文字を見つけたらこれをスキップするような処理を関数定義する必要があります。

まず、HTMLのヘッダー部に文字列型の変数 log1 と log2 を宣言し、許容したい記号の種類を配列定義します。例えば半角スペース、?、=、~、:、& の5つの半角記号をパスさせたいのであれば次のように記述します。

log1="";
log2="";
excp=new Array(" ", "?", "=", "~", ":", "&");

次に入力欄の onBlur で呼び出される Check() 関数の3行目に Permit(); というルーチンを追加し、この内容を定義します。(入力欄の name を "STR" とします。)

function Check() {
with(document.test.STR)
{
log1 = value;
if("あ".length == 1) //ここから6行は2バイト文字をサポートするブラウザへの対応
{
log = "";
for(i = 0; i < log1.length; i++) log += log1.charAt(eval(i))+"1";
log1=log;
}
Permit();
log2 = escape(log1);
if(log1 != log2)
{
alert("入力欄に半角英数字・記号を入れて下さい。");
value = "";
focus();
}
}
}

function Permit(){
for(i in excp)
{
if(log1.indexOf(excp[ i ], 0) > -1)
{
A = log1.indexOf(excp[ i ], 0);
log1 = log1.substring(0, A-1) + log1.substring(A + 1, log1.length);
Permit();
}
}
}

http://www.momotaro.com/~kiji/oni.cgi?num=2 をコピーして下の入力欄にペースとし、クリアボタンを押して下さい。 何事もなく、クリアされるはずです。しかし全角文字を入れたり、半角スペース及び /、@、-、+、.、*、_、?、=、~、:、& 以外の半角記号を入れたりすれば、警告されるでしょう。

Check() 関数の途中で Permit() 関数が呼び出され、後者は変数 excp に定義した配列の内容を順に読みとって、入力した文字の中に該当するものがないかを indexOf() メソッドでチェックします。 もしあればそれを変数 log1 の中で切り落として再チェックします。Permit() 関数が自分自身を呼びだしているのは、indexOf() メソッドが該当文字を1度だけしか検索しないため、もう1度チェックする必要があるからです。

もしパスさせたい記号・文字をもっとふやしたいのであれば、配列の宣言の中にそれを加えてやればいいのです。 これで、ユーザが半角英数字・記号を入力すべき欄に全角文字などを入力しても、ユーザが別の欄に入力しようとしたとき、或いは遅くとも「送信」ボタンを押したときにチェックされ、警告されるので、不正な文字の送信を防ぐことが出来ます。




次のトピックは「簡単!クリッカブル・マップ」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで