www.webdeveloper.com
Results 1 to 5 of 5

Thread: [n00b] Input Field Character Filtering: Opera Problem

  1. #1
    Join Date
    Aug 2009
    Posts
    6

    Question [n00b] Input Field Character Filtering: Opera Problem

    Ladies and Gentlemen, hello. This is my first post here ever.
    The following two simple examples are to perform the same task - block numeric input in text field, except one of the works in Opera and the other one doesn't:

    Example from W3 Schools - DOES NOT WORK!
    HTML Code:
    <html>
    	<body>
    	<script type="text/javascript">
    	function noNumbers(e)
    	{
    		var keynum;
    		var keychar;
    		var numcheck;	
    		if(window.event) // IE
    		{
    			keynum = e.keyCode;
    		}
    		else if(e.which) // Netscape/Firefox/Opera
    		{
    			keynum = e.which;
    		}
    		keychar = String.fromCharCode(keynum);
    		numcheck = /\d/;
    		return !numcheck.test(keychar);
    	}
    	</script>
    	<input type="text" onkeydown="return noNumbers(event)" />
    	</body>
    </html>
    Example from MR ED KJ - WORKS!
    HTML Code:
    <html>
    	<body>
    	<script type="text/javascript">
    	function onKeyPressBlockNumbers(e)
    	{
    		var key = window.event ? e.keyCode : e.which;
    		var keychar = String.fromCharCode(key);
    		reg = /\d/;
    		return !reg.test(keychar);
    	}
    	</script>
    	<input type="text" onkeypress="return onKeyPressBlockNumbers(event);" />
    	</body>
    </html>
    The scripts were tested under Windows XP Pro SP3 using the following browsers:

    1. Chrome: 2.0.172.43
    2. IE: 8.0.6001. 18702IC
    3. Firefox: 3.0.13
    4. Flock: 2.0.3
    5. Opera: 9.63
    6. Safari 3.2.1 (525.27.1)


    Any ideas what the reason may be? There's good chance this problem will be popping up frequently in the future, so it would really help to know what makes those things tick.
    Thank you for your time.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Usually this kind of problem (numeric or alphanumeric validation in form's controls) is to be solved otherwise, on using onkeyup (and oblur) events and Regular Expressions:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function noNumbers(e){
    e.value=e.value.replace(/\d/g,'');
    }
    </script>
    </head>
    <body>
    <form action="">
    <input type="text" onkeyup="noNumbers(this)" onblur="noNumbers(this)">
    </form>
    </body>
    </html>
    onkeydown and onkeypress are tricky events. Different browsers treat them in different ways, thus they are to be avoided in validation codes.

    More about Regular Expressions in javascript:
    http://lawrence.ecorp.net/inet/samples/regexp-intro.php
    Usual RegExp validation codes:
    http://lawrence.ecorp.net/inet/sampl...p-validate.php
    http://lawrence.ecorp.net/inet/sampl...-validate2.php
    Last edited by Kor; 08-31-2009 at 04:33 AM.

  3. #3
    Join Date
    Aug 2009
    Posts
    6

    Smile Thank you

    Thank you for the response and the links, Kor.
    Yes! As it turned out I did neglect the main trigger event difference, which only came to my attention a couple of hours after posting. I can see from the links that regular expressions are even bigger than I imagined.
    Quote Originally Posted by You View Post
    Different browsers treat them in different ways, thus they are to be avoided in validation codes.
    How right you are, but I really wanted it in the project for purely aesthetic reasons. My practical goal was actually the exact opposite allow number only. I've kinda managed to do that (works is Opera too) but at this point I don't know how to bring back the text editing commands that require key combinations e.g. Copy, Paste, Select All, etc. Furthermore, it's not as elegant as it could be.

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by Illusion Sector View Post
    but I really wanted it in the project for purely aesthetic reasons.
    That is exactly one of the reasons for you should use RegExp

  5. #5
    Join Date
    Aug 2009
    Posts
    6

    Question Yay!

    Haha! Got it!
    All seems to work fine now.
    Would regExp really help reduce code in this particular case though?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles