Posts
60
Comments
36
Trackbacks
18
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

posted on Monday, January 25, 2010 7:45 PM Print
Comments
No comments posted yet.

Post Comment

Title *
Name *
Email
Url
Comment *  
Please add 6 and 7 and type the answer here:
News
My Developer Notebook! This also happens to be my opinion place. Thanks for coming by.