Javascriptで禁則処理をする - tetsuya

2009/5/26 Javascriptを更新しました。（こちら）

=================================
ちょっとしたアプリを作るのも一通りの道具がいる。
数年前、Ajaxが流行ったときも、Mashupだのなんだのと作ってサイトを立ててみたりしたが、キチンと道具を用意しなかった。
いまどきは、いろいろ便利なツールがあるが（このブログでたくさん取り上げているYUIなどはそう）、こまごまとした地味なものは作っておいた方が楽な気がする。

ここのところ、バリデーションの仕掛けを作ってみたが、同じ入力系ということでJavascriptで禁則を行うコードを書いてみた。
やりたいことは簡単。

入力してはいけない文字列を他の文字に置換する

一種のコンバータと考えていいと思う。

初期画面のスクリーンショットは以下。

禁則する文字は

として（はてなに表示されないので、「まる１〜まる１０」と書く）、これが入力されたら「■」に置き換える。
画面の動きは、

入力フィールドに入力を行う。
入力フィールドからフォーカスを外すと置換された文字が帰ってくる。

ようにした。

以下が、適当にサンプルを入力した画面。

コンバートを行うscriptはオブジェクトMyConverterにしてみた。
下の「？？？？？？？？？」となっている部分は、「まる１〜まる１０」である。

/*!
 * MyConverter.js
 * 
 *  tetsuya_odaka (EzoGP)
 * 
 * (C) 2009, EzoGP.
 * $Id: syracava-1.0-min.js 455 2009-04-08 08:54:14Z tetsuya_odaka $
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *      http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * クライアントサイドでのコンバートオブジェクト。
 * 
 *  （クロージャーパターンで実装）
 * 
 * 
 */
var MyConverter = function() {
	 
	this.illegalChars =/[&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;〜]+/g;
	
	/**
     * 禁則処理を行うメソッド
     * 
     * @param
     *     		_string; 	検証対象。
     * @return
     * 			_rArray;	エラー配列（エラーなしのときは長さ0）
     */
    this.convertIllegal = function(_str){
    	alert(_str.match(this.illegalChars));
		// コンバート
		return _str.replace(this.illegalChars,'■');
    };
    
    /* 自身の参照値を返却 */
    return this;
};

上の画面のHTMLの全文を以下に示す。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>MyConverter</TITLE>

<style type="text/css">

input.ez_initguide {
	/* grey */
    color:#808080;
}

</style>
<!-- YUI2.7.0 --> 
<script type="text/javascript" src="../scripts/lib/yui/build/yahoo/yahoo-min.js">
</script>
<script type="text/javascript" src="../scripts/lib/yui/build/yahoo-dom-event/yahoo-dom-event.js">
</script>

<!-- MyConverter --> 
<script type="text/javascript" src="../scripts/MyConverter.js">
</script> 

<script type="text/javascript">
/*
 * コンバート検証
 *  （モジュールパターンで実装）
 */
convert = function() {
	var cnvObj;
	var	Dom 	= YAHOO.util.Dom;	
	var	Event 	= YAHOO.util.Event;
		
	/**
	* Inputにフォーカスが当たったときのハンドラー
	*/
	var onFocusHdlr = function(_evt,_obj) {

		// 初期値（入力ガイド）の場合だけ、入力値を消す。
		//  Dom.getStyleColor（）は
		//    rgb(128,128,128); mozilla, chrome, 
		//    #808080; IE7 
		//  と異なった戻り値となる。
		// _objは,HTMLInputElement;
		
		_e = YAHOO.util.Event.getTarget(_evt)
		var _id = _e.id;
		var _resId = _id + '_res';
		
		var _fColor=Dom.getStyle(_id, 'color');
		if( _fColor == 'rgb(128, 128, 128)' ||
				_fColor == '#808080'){ // for IE
			Dom.get(_id).value="";
		}
		// 入力フィールドの色を白にする。
		Dom.setStyle(_id, 'background-color', 'white');
		// 入力フィールドの文字の色をグレーから黒に変える
		Dom.setStyle(_id, 'color', 'black');
		// メッセージフィールドを消す
		Dom.get(_resId).innerHTML="";
	};

	/**
	* Inputからフォーカスが外れたときのハンドラー
	*/
	var onBlurHdlr = function(_evt,_obj){
		
		_e = YAHOO.util.Event.getTarget(_evt)
		var _id = _e.id;
		var _resId = _id + '_res';
		
		// 検証対象を取得.
		var _str  = Dom.get(_id).value;
		var _ret = cnvObj.convertIllegal(_str);

		Dom.get(_resId).innerHTML = _ret;

	};
	
	return {
	/**
	* 初期処理
	*/
    	init: function() {
    	
			cnvObj = new MyConverter();	
			
			// HTMLInputElementの配列を取得する。
			var _inObj = document.getElementsByTagName('input');
			for(var i = 0; i < _inObj.length; i++){
				// type=textに、focusとblurにイベントを仕込む
				if(_inObj[i].getAttribute('type') == 'text'){
					Event.addFocusListener(_inObj[i].id, onFocusHdlr, _inObj[i]);		    
					Event.addBlurListener(_inObj[i].id, onBlurHdlr, _inObj[i]);		    
				}
			}
		} // initの終わり
	};
}();

</script> 

</HEAD>
<BODY onload="convert.init()">
<h3>
クライアントサイドでのコンバート確認用
</h3>

<form method="post" action='#'>

入力；
<input id="text1" class="ez_initguide" type="text" size=50	
	value="入力してください." />
<div id="text1_res"></div>

</form>


<br>
</body>
</HTML>