Archive for January, 2010

Disable Backspace on Form Select Elements Javascript

This is another javascript example of the earlier post where I complete the same exact functionality with a little more readability.  The difference is that I would put this in production code first because it is more compact and better style.  So why rewrite this?  To really show the flexibility one might have when coding for the web page.  This code is normalization code that I believe would benefit every form as going back when hitting the backspace key on a form dropdown would (9 out of 10 times) me undesirable behavior.

<html>
  <head>
    <script type="text/javascript"
			src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
		</script>
		<script type="text/javascript">
		//<!--
			// This is a simple rewrite of my first IE normalization.
			// for the sake of simplicity and ease, we will shorten them
			// down a bit in size to better use the value of our bandwidth
			// elsewhere maintaining some readability
			$(function(){

			// Firefox
			$("select").keypress(function(e){return (e.which != 8)});

			// IE
			$(document).keydown(function(){
				return (typeof window.event != 'undefined' &&
							event.keyCode == 8 &&
							event.srcElement.type == 'select-one');
			};

			});
		//-->
		</script>
	</head>
	<body>
		<form id="my-form">
			<select>
				<option value="1">1</option>
				<option value="2">2</option>
			</select>
		</form>
	</body>
</html>

Please check out the earlier post regarding fixing form select elements if you would like to know more about what exactly is happening here.

 

 

HTML Code Fileindex.html

Javascript Object Notation (JSON) Shallow Dive

I was discussing a few things with a good friend several days ago and some of the things I have learned and conceptualized recently are very interesting with tons of capabilities being unlocked.  Here I discuss how to use JSON to make a simple object that looks cleaner than the normal fashion of Javascript objects and resembles Java for ease of translation.  As with all of my other posts that I write on javascript, you will notice that there are similarities in that I always use JQuery for the simple reasoning of not wanting to put code in my view/html.  Additionally, this is an HTML document, though it will work in traditional and strict forms of the newer HTML standards as well.  This is just a demo and description.

<html>
    <head>
        <script type="text/javascript"
           src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
        </script>
        <script type="text/javascript">
        //<!--
            // This is a simple javascript object where you have anAttribute,
            // then it's setter and getter
            var simpleObject = {
                "anAttribute":"Hello World",
                "getAnAttribute":function(){return this.anAttribute},
                "setAnAttribute":function(newAttributeValue){
                    this.anAttribute = newAttributeValue;
                }
            };

            // Code block of jQuery to interact with our object.
            // this is equal to $(document).ready(function(){});
            $(function(){
                // Add the original attribute to the demo div
                $("#demo").html(simpleObject.getAnAttribute());

                // Change anAttribute, using the setter
                simpleObject.setAnAttribute("Hi There");

                // Now let's alert anAttribute to prove that it has changed
                alert(simpleObject.getAnAttribute());
            });

        //-->
        </script>
    </head>

    <body>
        This is a simple demo to show how sweet Javascript Object Notation (JSON) really is.
        <div id="demo"></demo>
    </body>

</html>

Personally, I think getters and setters are old school but necessary when the need arises to encapsulate business logic.  In this particular example, there is no “business logic” which means little reason to use accessors though we will for translation and demonstration.

Notice the call to getAnAttribute() first to set the value of html in our “demo” div.  The latter is a simple alert.  The point is, at this point in time, the same attribute equals different values.

This has been tested on Chrome, IE 8 and Firefox.

So why is this useful?  I guess the first place that I see this used most often is in jQuery plugins, this is also the place that I started using it when I first began writing jQuery plugins many moons ago.  Secondly, I really like to write public APIs for web applications and was trying to concept a way to really simplify one of my APIs down to nothing for consumers.

So to recap, the benefits.

  1. Useful when writing jQuery plugins
  2. Easier and more powerful APIs
  3. Cleaner than the “Old School” way of creating javascript objects
  4. Very portable with current libraries

Currently I am at a loss for the drawbacks, leave them in comments if you have any.

IE Fix Backspace Key

The default behavior of a backspace key is (by default) annoying on forms in both IE and minimally in Firefox and some others. 

When you are in a text box or text area the back space key functions appropriately in all browsers that I have seen to this point.  When you have a select pulled down or in focus, then one of the more annoying features of the backspace key shows up.  When in this scenario, your user goes back to the previous page, and this I consider an annoying feature, particularly because data entry usually use the keyboard to make their selections.  If you have a long form that is mostly filled out, then you will become hated by your community (especially if they are data entry specialists). 

Here is one blog that goes much more in depth than I do, but does more than I need it to.  My point is to just cover the backspace key on a dropdown list, namely for Firefox, IE and some others.  How to disable a bunch of stuff.

If you want to disable backspace key on some form elements (namely dropdown select menus), using jQuery, this is how.

var BACKSPACE_KEY = 8;
$(function(){

	// Firefox backspace (select dropdown)
	$("select").keypress(function(e){
		if (e.which == BACKSPACE_KEY) return false;
	});

	// IE backspace
	$(document).keydown(function(){
		// Make sure it is ie
		if (typeof window.event != 'undefined'){
			skipBackspaceKey = false;

			// Lets first to check that it is a backspace key that was pushed
			if (event.keyCode == BACKSPACE_KEY)
			{
				// Now let's check to see if it is on a select dropdown
				if (event.srcElement.type == "select-one")
				{
					skipBackspaceKey = true;
				}
			}
			return (!skipBackspaceKey);
		} // end if
	});
});

And this works like a charm.  It has been tested in IE and Firefox.  Feel free to download the entire source project below.  Remember if you are on IE, you will have to accept the scripting warning that comes up when you load the project locally.

© 2012 - Jeff Ancel
Wordpress Themes
Scroll to Top