Working / Please Critique

JavaScript
1

I’ve been working on a script that removes characters from a text input. There are some examples online, one called ‘alphanumeric’, but the problem is that it doesn’t do anything if the evil characters are pasted into the text input. I came up with this solution, which is probably really crude, but want to know if it looks good or bad. I am learning more about javascript, so just because it works doesn’t mean I didn’t make mistakes, or should have done something differently. Also, I only tested in Firefox and IE8:


<!DOCTYPE html>
<html>
<head>
	<title>Only Allow Certain Characters</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
	<br>
	<form id="myform" action="">
		<input id="element1" name="mytext1" type="text">
		<input id="element2" name="mytext2" type="text">
	</form>
<script>
	(function($){
		$.fn.disableChars = function(a) {

			a = $.extend({
				allow: ''
			}, a);

			b = a.allow + 'abcdefghijklmnopqrstuvwxyz1234567890';

			var regex = new RegExp('[^' + b + ']', 'ig');

			$(this)
			.bind('keyup blur', function(){
				if (this.value.search(regex) != '-1') {
					this.value = this.value.replace(regex, '');
				}
			})
			.bind('contextmenu',function () {return false});

		}
	})(jQuery);

	$("#element1").disableChars();
	$("#element2").disableChars({allow:"\\.,\\\\s"});
</script>
</body>
</html>
2

You could also monitor the change event:

$(this)
	.bind('keyup blur change', function(){

Though you might just want to do change and blur (and remove keyup), have a play, see what works for you.

3

Adding change or changing keyup to change didn’t improve anything. Thanks for taking a look and commenting.

4

I don’t really know what jQuery does with regexen but you could possibly save some typing by using a regex and then .test

b = a.allow + ‘abcdefghijklmnopqrstuvwxyz1234567890’;

I can’t tell for sure, but it looks like you’re using “a” to add in specific characters later… but right now it’s just the space. You can add that to the regex

var b = /[A-Za-z0-9\s_-]/ig;
or
var b = /[\w\d\s_-]/ig;

now b is a pattern without explicitly creating a new RegExp object, and you can .test it, .match it, and .replace it like normal.

5

Well, I don’t really know, but I was assuming that RegExp() created kosher regex out of a string and at least the second param. I’ve been working more on this and have added in most of the functionality of alphanumeric. So, this is all I really need. I just want things to be perfect, and I appreciate the advice.


<!DOCTYPE html>
<html>
<head>
	<title>Character Input Limiter</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
	<br>
	<form id="myform" action="">
		<label for="element1">Alpha only</label>
		<input id="element1" name="mytext1" type="text">
		<br />
		<label for="element2">Alpha numeric + some extras</label>
		<input id="element2" name="mytext2" type="text">
		<br />
		<label for="element2">Numeric only</label>
		<input id="element3" name="mytext3" type="text">
		<br />
		<label for="element2">Numeric + some extras</label>
		<input id="element4" name="mytext4" type="text">
	</form>
<script>
	/*
	DISALLOWED INPUT CHARACTERS
	*/
	(function($){
		$.fn.disableChars = function(a) {

			/* bring in any modifications to allow */
			a = $.extend({
				allow: '',
				limit_to: ''
			}, a);

			/* create the character base alpha, numeric, or alphanumeric (default) */
			if(a.limit_to == 'alpha'){
				charbase = 'a-z';
			}else if(a.limit_to == 'numeric'){
				charbase = '0-9';
			}else{
				charbase = 'a-z0-9';
			}

			/* convert allow string to regex */
			allowed = a.allow.split('');
			for ( i=0; i<allowed.length; i++){
				allowed[i] = "\\\\" + allowed[i];
			}
			a.allow = allowed.join('');

			/* combine character base with allowed chars and create regex object */
			var regex = new RegExp('[^' + charbase + a.allow + ']', 'ig');

			/* monitor events on designated elements */
			$(this)
			.bind('keyup blur', function() {
				if (this.value.search(regex) != '-1') {
					this.value = this.value.replace(regex, '');
				}
			})
			.bind('contextmenu',function () {return false});

		}
	})(jQuery);

	$("#element1").disableChars({limit_to:"alpha"});
	$("#element2").disableChars({allow:".,:-() "});
	$("#element3").disableChars({limit_to:"numeric"});
	$("#element4").disableChars({limit_to:"numeric",allow:"-()."});
</script>
</body>
</html>