title: How to fix a flickering effect when tabbing into an input field that uses our default value / placeholder plugin?
body: <p>There are <a href="http://www.quora.com/JavaScript/Which-plugin-to-use-for-HTML5-placeholder-that-retains-the-label-on-focus" rel="nofollow noreferrer">a lot</a> of plugins dedicated to implementing <a href="https://developer.mozilla.org/en/HTML/Forms_in_HTML#The_placeholder_attribute" rel="nofollow noreferrer">HTML5's placeholder attribute</a> in older browsers. <a href="https://github.com/ripper234/input-placeholder" rel="nofollow noreferrer">This is the one we're using</a>.</p>
  
  <p>While it does't use the placeholder attribute like some of the others options, it does (after our tweaks) <a href="https://stackoverflow.com/questions/8574356/html5-placeholder-disappears-on-focus">preserve the text on focus</a> - focusing onto an input field doesn't erase its contents.</p>
  
  <p>We have one annoyance with it though - when you hit TAB and move into an input field with the default (/ empty) text, the default text first gets selected, until we fix this and <a href="https://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area/841121#841121">position the caret</a> at position 0 ourselves, causing a noticable flickering effect.</p>
  
  <p>To reproduce, just check out the fiddle I linked to above (<a href="http://jsfiddle.net/ripper234/zSxjw/2/" rel="nofollow noreferrer">here it is again</a>). Is there an easy solution to this problem (needs to work on IE9+/Firefox/Chrome)?</p>