Different placeholder behavior in Internet Explorer and other browsers

1 posts, 0 answers
  1. Joachim
    Joachim avatar
    1 posts
    Member since:
    Oct 2012

    Posted 08 Nov 2012 Link to this post

    Hi,

    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:

    $("input.autoComplete")
            .kendoAutoComplete({...})
            .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.

Back to Top