enltr xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:og="http://ogp.me/ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:sioc="http://rdfs.org/sioc/ns#" xmlns:sioct="http://rdfs.org/sioc/types#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#"http://www.w3.org/1999/xhtml/vocab/////////////////Add customizable placeholders with .placeholder() | BitsyCodehttps://www.bitsycode.com/methods/forms/placeholderAdd customizable placeholders with .placeholder() | BitsyCode Add customizable placeholders with .placeholder() | BitsyCode html not-front not-logged-in no-sidebars page-node page-node- page-node-30 node-type-page

Add customizable placeholders with .placeholder()

container

.placeholder()


Description: Set customizable place holders on textboxes or textareas.

You may be thinking why not just use the "placeholder" attribute from HTML5, the simple answer is there's more flexiblity using this plugin. You can style the placeholder text and field how ever you want.


Example:

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>placeholder demo</title>
      <script src="http://code.bitsycode.com/bitsycode-latest.min.js"></script>
    </head>
    <body>
        
        <b>TextBox</b><br />
        <input type="text" name="example_field1" class="example_field1 placeholder" value="Click here and watch me work." />
        
        <br /><br />
        
        <b>TextArea</b>
        <textarea name="textarea1" class="placeholder" style="height:200px; width:50%">This is a watermarked "textarea"</textarea>
        
        <script>
            
            bitsyCode.ready(function(){
                bitsyCode(".placeholder").placeholder();
            })
            
        </script>
     
    </body>
    </html>

Preview:

TextBox


TextArea
Share

Developed and built with passion and commitment.
Maintained by the bitsycode team.