SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Working / Please Critique

    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:

    Code:
    <!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. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You could also monitor the change event:

    Code JavaScript:
    $(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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    You could also monitor the change event:

    Code JavaScript:
    $(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.
    Adding change or changing keyup to change didn't improve anything. Thanks for taking a look and commenting.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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. #5
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.
    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.

    Code:
    <!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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •