Placeholder and IE < 10 issues

Question

I have been working for this for quite a time now. This is regarding the placeholder issues on IE <10. I saw a lot of this here but i just felt something weird with this case. To solve this issue of mine, i was using placeholder.js. So my first issues is, i have one <input type="text" id="textbox1" placeholder="My Text"/> and a dropdown. When I select any from the dropdown, it should change the placeholder which it did. So the options in my dropdown are let's a, b, c. If i select b/c at first then click search button (without typing in the textbox), the search will function and the placeholder will not be cleared. But if i select a, the placeholder text will be gone. It will be displayed again if i click the textbox. And after that selecting b/c will then have the same behavior.

My second issue with this is when submitting without typing anything in the search box. The placeholder text will be treated as a text and will be then the search word. This is a common issue. I dont know why the polyfill i used was not able to solve this or maybe i should do a lot more than just including the placeholder.js? So what i just did in my search() function is just this:

    if($.browser.msie && $.browser.version < 10.0){
        if($("#textbox").val() == $("#textbox" + s).attr("placeholder")){
            text = "";
        }
    }

But this is not actually a good solution. Any ideas? It would really help me. I will gladly appreciate it.

Answer 1

Recommendations

First of all, i would recommend your not to use placeholder.js. There is no reason for using this. Implementing such a library will cause unnecessary overhead and traffic.

I also suggest you to check for functionality support instead of browsers and their versions! So I would also recommend you to get away from modernizr and implement your own short check for functionality support. Why should you do this? and How to use this techniques bulletproof?

So, instead of implementing something like modernizr, write your own little javascript class to check for support. You could do it like this:

window.Compatibility = {
  Placeholder: function () {
    return 'placeholder' in document.createElement('input');
  }
};

Clean solution

In your case, check if the browser supports the placeholder attribute of input elements. If this is not the case, you can implement additional fallback logic:

window.Search = {
  Placeholder: 'this is the default placeholder text',
  Execute: function (pattern) {
    // Implement your search logic here!
  }
};

$('#executesearch').click(function() {
  var searchpattern = $('#searchpattern').val();
  if(!Compatibility.Placeholder){
      if (searchpattern === Search.Placeholder)
        return false;
  }

  Search.Execute(searchpattern);
}

I am assuming you have an <input id=searchpattern type=text> where you can enter your search keywords and an <input id=executesearch type=button> for executing the search.