This is a migrated thread and some comments may be shown as answers.

Different placeholder behavior in Internet Explorer and other browsers

0 Answers 310 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Joachim asked on 08 Nov 2012, 09:58 AM

I ran in some cross browser compability issues with the placeholder property. Apperently this is because Internet Explorer up to version 9 cannot handle the "placeholder" attribute correctly.

Issues were:
  1. In Internet Explorer the color of the placeholder text was equal to the color of the text typed in the input field, all other browsers showed the placeholder in light grey.
  2. When clicking in the field the placeholder would not disappear in browsers like Firefox for example, but simply changed color to the normal input color. It only disappeared as soon as you started typing. IE, however, removed the placeholder text as soon as the input field is clicked in and shows the user a empty input field, which was my desired behaviour.

To fix these issues i came up with some event handlers that can be easily attached to your autocomplete setup script plus two lines browser specific of CSS code.

JS Autocomplete setup code:

        .focusin(function () {         
            //If IE the placeholder will be hidden, but typed text
// would be in the placeholders colour, so change it here to your normal
// input color
            if ($.browser.msie === true) {                 $(this).css('color''black');             }         }).focusout(function () {             //If IE and the value is empty, the placeholder will be shown;
// make sure it has the right colour
            if ($.browser.msie === true && $(this).val() === '') {                 $(this).css('color''#6d6d6d');             }                }).ready(function () {             var el = $("input.autoComplete");             var value = $(el).val();             if (value !== $(el).data('kendoAutoComplete').options.placeholder) {                 //every browser except IE return empty value if input is empty
// but placeholder is shown
                if (value !== '') {                     $(el).css('color''black');                 }             }  else {                 //if IE change color for your place holder;                 if ($.browser.msie === true) {                     $(el).css('color''#6d6d6d');                 }             }         });

CSS Code:
/*This will make the placeholder invisible in Gecko/WebKit browsers on focus*/
input:focus::-webkit-input-placeholder { colortransparent !important; }
input:focus:-moz-placeholder {colortransparent !important; }

I hope the code helps others, with the same cross browser issues.

No answers yet. Maybe you can help?

Asked by
Top achievements
Rank 1
Share this question