Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>In looking at the "Web Forms : input placeholder" section of <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills" rel="nofollow noreferrer">HTML5 Cross Browser Polyfills</a>, one I saw was <a href="https://github.com/parndt/jquery-html5-placeholder-shim" rel="nofollow noreferrer">jQuery-html5-placeholder</a>.</p> <p>I tried the <a href="http://www.miketaylr.com/code/placeholder.html" rel="nofollow noreferrer">demo</a> out with IE9, and it looks like it wraps your <code>&lt;input&gt;</code> with a span and overlays a label with the placeholder text.</p> <pre><code>&lt;label&gt;Text: &lt;span style="position: relative;"&gt; &lt;input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom"&gt; &lt;label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481"&gt;Hi Mom&lt;/label&gt; &lt;/span&gt; &lt;/label&gt; </code></pre> <p>There are also other shims there, but I didn't look at them all. One of them, <a href="https://github.com/jamesallardice/Placeholders.js" rel="nofollow noreferrer">Placeholders.js</a>, advertises itself as "No dependencies (so no need to include jQuery, unlike most placeholder polyfill scripts)."</p> <p><strong>Edit:</strong> For those more interested in "how" that "what", <a href="http://www.flippinawesome.org/2013/04/15/advanced-placeholder-polyfill/" rel="nofollow noreferrer">How to create an advanced HTML5 placeholder polyfill</a> which walks through the process of creating a jQuery plugin that does this.</p> <p>Also, see <a href="https://stackoverflow.com/questions/14445891/keep-placeholder-on-focus-in-ie10">keep placeholder on focus in IE10</a> for comments on how placeholder text disappears on focus with IE10, which differs from Firefox and Chrome. Not sure if there is a solution for this problem.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload