Setting placeholder att in IE9

Question

I have the following code that run based on button click.

 function ClickYes() {      
      $('#<%=txtMsg.ClientID%>').attr('placeholder', 'Tell me more');
    }

The button is declared as the following

<button type="button" class="com-yes-btn2 feedback-btn-grey empx11b12" id="btnYes" onclick="javascript:ClickYes();">

</button>

the problem is that I need to set placeholder att dynamically based on event, in chrome and firefox the behavior is right, but when using IE9 placeholder attribute was not added.

how can I manage this cross browsers

Thanks

IE9 does not support the `placeholder` attribute but there are workarounds. Have a look at this answer to a similar question: http://stackoverflow.com/a/13281620/1423456 — Kaarel Nummert, Feb 19 '14 at 13:27

Jai · Answer 1 · 2014-02-19T13:35:26.143

As far as i know IE9 does not support placeholder attribute so it is not functional in ie9.

Placehoder attribute not supported in ie9

You can follow this link to see the compatibility on caniuse.com

so instead you can try this workaround:

function ClickYes() {      
  if(navigator.userAgent.indexOf("MSIE") > 0){
     $('#<%=txtMsg.ClientID%>').val('Tell me more');
  }else{
     $('#<%=txtMsg.ClientID%>').attr('placeholder', 'Tell me more');
  }
}

score 3 · Answer 2 · edited May 23 '17 at 12:03

IE9 doesn't supports the placeholder attribute, you will need to use the blur & focus events to simulate this functionnality.

function ClickYes() {

    var element = $('#<%=txtMsg.ClientID%>');

    // default action (on moderns browsers) 
    var placeholder = function() {
        element.attr('placeholder', 'Tell me more');
    };

    if (navigator.appVersion.match(/MSIE [\d.]+/)) {
        // if MSIE: we override this function
        placeholder = function() {
            var placeholderText = 'Tell me more';
            element.val(placeholderText);
            element.blur(function(){
                $(this).val() == '' ? $(this).val(placeholderText) : false;
            });
            element.focus(function(){
                $(this).val() == placeholderText ? $(this).val('') : false;
            });
        };
    };

    placeholder(); // we call the created function
}

Source: placeholder is not working in IE9

Sachin · Accepted Answer · 2014-02-19T14:52:25.550

Yes Placeholder is not supported by IE 9. But you can look around to some alternative like javascript to achieve this very easily

<input type="text" placeholder="test" value="placeholder text" 
onfocus="if (this.value=='placeholder text') this.value = ''" onblur="if (this.value=='') this.value = 'placeholder text'"/>

But you need to take care while using this approach as this approach setting the value of textbox. So when you will retrieve it, you will get the value. So whenever you will use it, you need to check for the placeholder value.

Your function would be like this

function ClickYes() {      
      // for modern browsers
      $('#txtMsg').attr('placeholder', 'Tell me more');

      // for older browsers
      $('#txtMsg').val('Tell me more');
      $('#txtMsg').css('color','#CCC');
    }

Now you need to handle the focus and blur event to make it complete like this

 $(document).ready(function () {
    $("#txtMsg").focus(function () {
       if ($(this).val() == 'Tell me more') {
          $(this).val('');
          $(this).css('color', 'black');
       }
    });
    $("#txtMsg").blur(function () {
       if (!$(this).val()) {
          $(this).val('Tell me more');
          $('#txtMsg').css('color', '#CCC');
       }
    });
 });

Js Fiddle Demo

Js Fiddle Demo 2

score 1 · Answer 4 · answered Feb 19 '14 at 13:46

1

I use place-holder.js,It is easy to use: PlaceHolder

you can use it only by refrenced to jquery and placeholder.js and below code

$('input, textarea').placeholder();

answered Feb 19 '14 at 13:46

mina morsali

778
1
16
29

Setting placeholder att in IE9

4 Answers4