apipkin/form-filters.js

## form-filters.js
YUI.add('form-filter', function(Y){

	var Filter  = function(config) {
		config.node = config.host;
		Filter.superclass.constructor.apply(this, arguments);
	};

	Y.mix(Filter,{
		NAME : 'form-filter',
		NS : 'filter',
		ATTRS : {
			host : {}
		},
		FILTERS : {
			NUMBERS  : 'numbers',  // allow numbers
			SPECIAL  : 'special',  // allow special characters
			LETTERS  : 'letters'  // allow all letters
		}
	});

	Y.extend(Filter, Y.Base, {
		_storedValues : [],
		_filterable : [],
		_filters : [],
		_chars : [],
		CHARS : {
			'numbers'  : ['0','1','2','3','4','5','6','7','8','9'],
			'special' : ['`','~','!','@','#','$','%','^','&','*','(',
			             ')','_','-','+','=','[','{',']','}','\\','|',
			             ';',':','\'','"',',','.','/','<','>','?'],
			'letters' : ['a','b','c','d','e','f','g','h','i','j','k',
			             'l','m','n','o','p','q','r','s','t','u','v',
			             'w','x','y','z','A','B','C','D','E','F','G',
			             'H','I','J','K','L','M','N','O','P','Q','R',
			             'S','T','U','V','W','X','Y','Z']
		},
		initializer : function(config) {
			// attach the key press events
			this.get('host').on('keydown', this._storeValue, this);
			this.get('host').on('keyup', this._compareKeyToFilter, this);
			// add filters from config
			if(config.filters && config.filters.length) {
				for(o in config.filters) {
					this.addFilter(config.filters[o]);
				}
			}
			// add chars from config
			if(config.characters && config.characters.length) {
				for(o in config.characters) {
					this.addCharacter(config.characters[o]);
				}
			}
		},
		addFilter : function(filter) {
			// finds filter in _filters and add if not found
			// adds filter's chars to _chars
			// finds filter in _filters and removes
			var index = this._searchFilter(filter);
			if(index === -1) {
				this._filters.push(filter);
			}
			// removes all chars associated with the filter
			var filterChars = this.CHARS[filter];
			if(filterChars) {
				for(var i = 0; i < this.CHARS[filter].length; i++) {
					this.addCharacter(this.CHARS[filter][i]);
				}
			}
		},
		removeFilter : function(filter) {
			// finds filter in _filters and removes
			var index = this._searchFilter(filter);
			if(index > -1) {
				this._filters.splice(index,1);
			}
			// removes all chars associated with the filter
			var filterChars = this.CHARS[filter];
			if(filterChars) {
				for(var i = 0; i < this.CHARS[filter].length; i++) {
					this.removeCharacter(this.CHARS[filter][i]);
				}
			}
		},
		addCharacter : function(chr) {
			// finds char in _chars and adds if not found
			if(chr == '\\' || chr == ']') {
				chr = '\\' + chr;
			}
			var index = this._searchChar(chr);
			if(index === -1) {
				if(chr == '-') {
					this._chars.unshift(chr);
				}else{
					this._chars.push(chr);
				}
			}
		},
		removeCharacter : function(chr) {
			// finds char in _chars and removes
			if(chr == '\\' || chr == ']') {
				chr = '\\' + chr;
			}
			var index = this._searchChar(chr);
			if(index > -1) {
				this._chars.splice(index,1);
			}
		},
		_storeValue : function(e) {
			if(this._chars.length) {
				this._storedValues.push(this.get('host').get('value'));
			}
		},
		_compareKeyToFilter : function(e) {
			// allow ctrl + any char
			if(e.ctrlKey) {
				return;
			}
			Y.log(this._chars);
			if(this._chars.length) {
				var regex = '^[' + this._chars.join('') + ']*$';
				var val = this._storedValues.pop();
				if(!new RegExp(regex).test(this.get('host').get('value'))){
					this.get('host').set('value',val);
				}
			}
		},
		_searchFilter : function(filter) {
			return this._search(filter, this._filters);
		},
		_searchChar : function(chr) {
			return this._search(chr, this._chars);
		},
		_search : function(needle, haystack) {
			for(var i = 0; i < haystack.length; i++) {
				if(haystack[i] === needle) {
					return i;
				}
			}
			return -1;
		}
	});

	Y.namespace('Form').Filter = Filter;

},'0.1',{requires:['base','node','event']});

## index.html
<html><head><title>Form Filter Test</title>
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script type="text/javascript" src="echofin-form-filter.js"></script>
<script type="text/javascript">
YUI({
	modules: {
		'form-filter' : {
		    fullpath: 'form-filter.js',
		    requires: ['base','node','event']
		}
	}
}).use('form-filter',function(Y){
	Y.on('domready',function(){
		Y.all('.filter-numbers').plug(Y.Form.Filter,{'filters':[Y.Form.Filter.FILTERS.NUMBERS]});
		Y.all('.filter-letters').plug(Y.Form.Filter,{'filters':[Y.Form.Filter.FILTERS.LETTERS]});
		Y.all('.filter-special').plug(Y.Form.Filter,{'filters':[Y.Form.Filter.FILTERS.SPECIAL]});
	});
});

</script>

</head>
<body>
	<form><fieldset>
		<input type="text" class="filter-numbers"/> <small>numbers only</small><br/>
		<input type="text" class="filter-letters"/> <small>letters only</small><br/>
		<input type="text" class="filter-special"/> <small>special only</small><br/>
	</fieldset></form>
</body></html>
	YUI.add('form-filter', function(Y){

	var Filter = function(config) {
	config.node = config.host;
	Filter.superclass.constructor.apply(this, arguments);
	};

	Y.mix(Filter,{
	NAME : 'form-filter',
	NS : 'filter',
	ATTRS : {
	host : {}
	},
	FILTERS : {
	NUMBERS : 'numbers', // allow numbers
	SPECIAL : 'special', // allow special characters
	LETTERS : 'letters' // allow all letters
	}
	});

	Y.extend(Filter, Y.Base, {
	_storedValues : [],
	_filterable : [],
	_filters : [],
	_chars : [],
	CHARS : {
	'numbers' : ['0','1','2','3','4','5','6','7','8','9'],
	'special' : ['`','~','!','@','#','$','%','^','&','*','(',
	')','_','-','+','=','[','{',']','}','\\','\|',
	';',':','\'','"',',','.','/','<','>','?'],
	'letters' : ['a','b','c','d','e','f','g','h','i','j','k',
	'l','m','n','o','p','q','r','s','t','u','v',
	'w','x','y','z','A','B','C','D','E','F','G',
	'H','I','J','K','L','M','N','O','P','Q','R',
	'S','T','U','V','W','X','Y','Z']
	},
	initializer : function(config) {
	// attach the key press events
	this.get('host').on('keydown', this._storeValue, this);
	this.get('host').on('keyup', this._compareKeyToFilter, this);
	// add filters from config
	if(config.filters && config.filters.length) {
	for(o in config.filters) {
	this.addFilter(config.filters[o]);
	}
	}
	// add chars from config
	if(config.characters && config.characters.length) {
	for(o in config.characters) {
	this.addCharacter(config.characters[o]);
	}
	}
	},
	addFilter : function(filter) {
	// finds filter in _filters and add if not found
	// adds filter's chars to _chars
	// finds filter in _filters and removes
	var index = this._searchFilter(filter);
	if(index === -1) {
	this._filters.push(filter);
	}
	// removes all chars associated with the filter
	var filterChars = this.CHARS[filter];
	if(filterChars) {
	for(var i = 0; i < this.CHARS[filter].length; i++) {
	this.addCharacter(this.CHARS[filter][i]);
	}
	}
	},
	removeFilter : function(filter) {
	// finds filter in _filters and removes
	var index = this._searchFilter(filter);
	if(index > -1) {
	this._filters.splice(index,1);
	}
	// removes all chars associated with the filter
	var filterChars = this.CHARS[filter];
	if(filterChars) {
	for(var i = 0; i < this.CHARS[filter].length; i++) {
	this.removeCharacter(this.CHARS[filter][i]);
	}
	}
	},
	addCharacter : function(chr) {
	// finds char in _chars and adds if not found
	if(chr == '\\' \|\| chr == ']') {
	chr = '\\' + chr;
	}
	var index = this._searchChar(chr);
	if(index === -1) {
	if(chr == '-') {
	this._chars.unshift(chr);
	}else{
	this._chars.push(chr);
	}
	}
	},
	removeCharacter : function(chr) {
	// finds char in _chars and removes
	if(chr == '\\' \|\| chr == ']') {
	chr = '\\' + chr;
	}
	var index = this._searchChar(chr);
	if(index > -1) {
	this._chars.splice(index,1);
	}
	},
	_storeValue : function(e) {
	if(this._chars.length) {
	this._storedValues.push(this.get('host').get('value'));
	}
	},
	_compareKeyToFilter : function(e) {
	// allow ctrl + any char
	if(e.ctrlKey) {
	return;
	}
	Y.log(this._chars);
	if(this._chars.length) {
	var regex = '^[' + this._chars.join('') + ']*$';
	var val = this._storedValues.pop();
	if(!new RegExp(regex).test(this.get('host').get('value'))){
	this.get('host').set('value',val);
	}
	}
	},
	_searchFilter : function(filter) {
	return this._search(filter, this._filters);
	},
	_searchChar : function(chr) {
	return this._search(chr, this._chars);
	},
	_search : function(needle, haystack) {
	for(var i = 0; i < haystack.length; i++) {
	if(haystack[i] === needle) {
	return i;
	}
	}
	return -1;
	}
	});

	Y.namespace('Form').Filter = Filter;

	},'0.1',{requires:['base','node','event']});
	<html><head><title>Form Filter Test</title>
	<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
	<script type="text/javascript" src="echofin-form-filter.js"></script>
	<script type="text/javascript">
	YUI({
	modules: {
	'form-filter' : {
	fullpath: 'form-filter.js',
	requires: ['base','node','event']
	}
	}
	}).use('form-filter',function(Y){
	Y.on('domready',function(){
	Y.all('.filter-numbers').plug(Y.Form.Filter,{'filters':[Y.Form.Filter.FILTERS.NUMBERS]});
	Y.all('.filter-letters').plug(Y.Form.Filter,{'filters':[Y.Form.Filter.FILTERS.LETTERS]});
	Y.all('.filter-special').plug(Y.Form.Filter,{'filters':[Y.Form.Filter.FILTERS.SPECIAL]});
	});
	});

	</script>

	</head>
	<body>
	<form><fieldset>
	<input type="text" class="filter-numbers"/> <small>numbers only</small><br/>
	<input type="text" class="filter-letters"/> <small>letters only</small><br/>
	<input type="text" class="filter-special"/> <small>special only</small><br/>
	</fieldset></form>
	</body></html>