Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>@Roatin Marth is right; if you're going to treat the text as a placeholder, it's supposed to clear. That's the very definition of a placeholder.</p> <p>Still, I mocked up a proof of concept that you're welcome to use as you like. However, I had to make the placeholder text so light it's barely viewable to keep it from garbling the front text too much (which is why the default behavior is to clear it).</p> <p>You can see it working at: <a href="http://jsfiddle.net/zYQ4Q/4/" rel="nofollow">http://jsfiddle.net/zYQ4Q/4/</a></p> <pre><code>// Create placeholder input to serve as background var $test = $('#test'); var $placeholder = $test.clone().removeAttr('id').removeAttr('placeholder').addClass('placeholder').val($test.attr('placeholder')); var $container = $('&lt;span class="placeholder-container"&gt;&lt;/span&gt;'); $container.insertAfter($test).append($test).append($placeholder); // Basic styling $container.css({ position: 'relative' }); $test.css({ position: 'absolute', left: 0, top: 0, zIndex: 10, backgroundColor: 'transparent', borderColor: 'transparent' }); $placeholder.css('color', 'transparent'); // Behavior for focus and blur to achieve the visual effect $test.focus(function(){ var $input = $(this); var $placeholder = $('.placeholder', $input.parent()); $placeholder.css('color', '#e0e0e0'); }).blur(function(){ var $input = $(this); var $placeholder = $('.placeholder', $input.parent()); if ($input.val() == '') $placeholder.css('color', 'transparent'); }).keyup(function(){ var $input = $(this); if ($input.val().trim() != '') { $placeholder.val(''); } else { $placeholder.val($input.attr('placeholder')); } }); </code></pre> <p><strong>UPDATE</strong>: Code and jsfiddle have been updated to reflect new changes based on OP's comment. The placeholder now clears after text has been entered into the input. </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. This table or related slice is empty.
    1. 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