Add customizable placeholders with .placeholder()

.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
  • Usage

    • How to use:

      Works on both TextBoxes and TextAreas

      1. Set a class or ID for the field.
      2. Set the value of the field.
      3. Specify the class or ID of the element you want watermarked in method.

      HTML:
      <input type="text" name="my-field-name" class="placeholder" value="My Placeholder Text" />
      JavaScript:
      bitsyCode.ready(function(){ // Check for document ready
          bitsyCode(".placeholder").placeholder();
      })

      always use bitsyCode.ready(function(){ }) ... So that all elements are completed loading on the page before watermarking them.

  • Options

    • What options are there:

      There are no options for this method.

  • Returns

    • Returns: No return type

      This method does not need to return any type.

Share