jQuery: valid placeholders with xhtml

Site Admin Joined: Aug 22, 2007 Posts: 1775

I found a litte tweak to set a placeholder with jQuery in xHTML input fields.

html5 example:

Code:

echo '<input type="text" name="myvalue" placeholder="myvalue" value="' , $myvalue , '" />';

if we try it with the placeholder tag from html5, then we become an validation error in xHTML. Its pitty, this tag is pretty cool. Now i have looked in the world wide web and have a found a solution with jQuery for xHTML.

xHTML example with jQuery:

Code:

$myvalue = '';


echo '<input type="text" name="myvalue" id="myvalue_placeholder" value="' , $myvalue , '" />';





if ($myvalue == '') {


   $myvalue_placeholder = '<script type="text/javascript">' . PHP_EOL


                   . '$(document).ready(function() {' . PHP_EOL


                   . '   var Element = \'#myvalue_placeholder\';' . PHP_EOL


                   . '   var myvalue = \'my placeholder text...\';' . PHP_EOL


                   . '      $(Element).val(myvalue);' . PHP_EOL


                   . '      $(Element).bind(\'focus\',function() {' . PHP_EOL


                   . '      $(this).addClass(\'focus\');' . PHP_EOL


                   . '      if ($(this).val()==myvalue) {' . PHP_EOL


                   . '         $(this).val(\'\');' . PHP_EOL


                   . '      }' . PHP_EOL


                   . '   }).bind("blur",function() {' . PHP_EOL


                   . '      if ($(this).val()==\'\') {' . PHP_EOL


                   . '         $(this).val(myvalue);' . PHP_EOL


                   . '         $(this).removeClass(\'focus\');' . PHP_EOL


                   . '      }' . PHP_EOL


                   . '   });' . PHP_EOL


                   . '});' . PHP_EOL


                   . '</script>' . PHP_EOL;


   addJSToBody($myvalue_placeholder,'inline');


}