$(function(){
$('input[type="text"]').each(function(){
if(this.value==''){this.value='Enter Value'}
});
$('input[type="text"]').focus(function(){
if(this.value=='Enter Value'){this.value=''}
});
$('input[type="text"]').blur(function(){
if(this.value==''){this.value='Enter Value'}
});
});

The first part of the code identifies that if the value of the input field is empty add ‘Enter Value’. The second part of the code removes the value ‘Enter Value’ from input fields as it gains focus. The last part of the code adds ‘Enter Value’ to empty fields as they lose focus. This code may not work in every situation, but it can help in some situations. Let me know how it works and if you found other modifications of the code that work even better. This is a dependent on jQuery but I’m sure you may find a version that can adapt to other libraries or straight JavaScript.

Select Problem with IE

Most of you probably ran into this article because you are half bald trying to figure out how to make your select box options show their full text in Internet Explorer when the select option has a static size set. Like the figure above illustrates, looks simple to fix but holy cow did it take a lot of research to figure out the best way to do it. After hours of research, I found out that I can’t do it with CSS alone. Many solutions I saw out there used Javascript and injected CSS in the Javascript. I’m not a big fan of CSS in Javascript. I’d rather have my CSS separate and change the way something looks in the stylesheet. For that reason I find myself using jQuery’s addClass, removeClass, toggleClass, and toggle quite often. That is what this code is going to do for you. I don’t think this is the best way for everyone, but it is the best way for me.

I’m not a programmer per say so I stick to the different code libraries. I am a jQuery man so my code requires jQuery. So Here is my code and I’ll explain after you see it.

    $(function() {
      $('select').focus(function(){
        $(this).addClass('ie_select');
      });
      $('select').blur(function(){
        $(this).removeClass('ie_select');
      });
    });

Place that code in the head of your document wrapped in a script tag or however you like to call your Javascript and create a specific CSS class called .ie_select in your stylesheet and style it according to what you need it to do. If you only want to apply the Javascript to specific browsers, you’ll need to add some conditional statements to your code.

It’s fairly straight forward code. This is what is going on:

1. When a select item has focus, add the CSS class of .ie_select to the select item.
2. When a select item loses focus or blurs, remove the CSS class of .ie_select from the select item.

I’ve found this code is much more readable to someone like myself who dabbles in jQuery when it comes to presentational use of it. That is exactly what the purpose of this code is, to fix presentation.

FYI

For what I was doing I had to add position: absolute to my CSS for .ie_select to get things to display the way I needed. A majority of the tutorials out there did nothing more than change from a fixed width on the select to a width: auto and that seemed to be all they needed. My layout was a bit more complicated and that didn’t work for me. This code will not style your select element for you, but it will enable you to be able to style it the way you need things styled.