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.

have this question http://stackoverflow.com/questions/15020826/how-to-support-placeholder-tag-in-ie8-and-9 — Bhojendra Rauniyar, Jan 15 '14 at 08:39
Always check for functionality support instead of browsers and their versions! — ˈvɔlə, Jan 15 '14 at 08:41
@WolleVanillebärLutz Please tell OP, how to check functionality of `placeholder`, especially when OP has included a library to create the functionality for the said property. — Teemu, Jan 15 '14 at 08:58

ˈvɔlə · Accepted Answer · 2014-01-15T09:47:18.407

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.

_"I would also recommend to get away from modernizr and implement your own..."_. Why??? Especially when link you posted introduces Modernzr... — Adriano Repetti, Jan 15 '14 at 09:39
@Adriano - As I already stated out: _Implementing such a library will cause unnecessary overhead and traffic._ My reference (which introduces Modernizr) really good discribes which detection techniques are existing and how modernizr works and why you shouldn't check for specific browsers. — ˈvɔlə, Jan 15 '14 at 09:45
Full featured modernzr is 14 KB. You can customize download to include only checks you really need. It's so popular that almost for sure every single browser has its own copy in cache. I don't see a single good reason to reinvent the wheel. Of course you may even rewrite your own jQuery library (or whatever you use)... — Adriano Repetti, Jan 15 '14 at 09:51
@Adriano - It's not about reinventing the wheel. It's about undestanding everything of your application and to avoid unnecessary overhead. I agree that it's not my decision wheather he should use `modernizr` or not. But it was important for me that he understands how to check for something like this. — ˈvɔlə, Jan 15 '14 at 10:10

Placeholder and IE < 10 issues

1 Answers1

Recommendations

Clean solution