JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<form class="example">
    <input type="text" placeholder="YEEEAH!" />
</form>

CSS

/**
 * PlaceHolder v.1.0
 * Author: Joonas Pääkkö
 * Website: www.joonas.me

 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
*/

/*

This shows the structure and all the _possible_ elements and classes:

	<form>

		<div class="placeholder-wrap input-element clearButton type-text CustomClass ph-focus">
			<div class="ph-clear"></div>
			<input type="text" class="ph-field" />
			<div class="ph-text">
				Lorem ipsum
			</div>
		</div>

		<div class="placeholder-wrap textarea-element clearButton type-text CustomClass ph-focus">
			<div class="ph-clear"></div>
			<textarea type="text" class="ph-field"></textarea>
			<div class="ph-text">
				Lorem ipsum
			</div>
		</div>

	</form>


	Special classes:

	ph-focus = Only shows up when you focus into the text field.
	CustomClass = This is set by data-ph-class="CustomClass" you can name it however you'd like.
	type-text = This is defined by the type attribute of the text field element it is associated with.
	input-element = This is depends on the element.
	textarea-element = This is depends on the element.
	clearButton = Only surfaces if Clear button is activated.
	form[class^="ph-form"] [placeholder] = For targetting elements when JS is disabled. Finds all elements withing the specific form that contain a placeholder attribute.

	Special elements:
	<div class="ph-clear"></div> = Is only created if you enable it.


*/


/* ******************** */
/*       Main CSS       */
/* ******************** */
/* 	  You, no touchy!   */
/* ******************** */

.placeholder-wrap {
	position: relative;
	z-index: 0;

/*
	overflow: hidden;
*/
}

[placeholder],
.ph-field {
	float: left;
	position: relative;
	z-index: 1;
	border: none;
	background: url('ie7fix.gif');
	margin: 0px;
	cursor: text;
}

.ph-text {
	position: absolute;
	z-index: 0;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	margin: 0px 2px 0px 2px;
	cursor:...

JavaScript

$('.example [placeholder]').PlaceHolder();


/**

 * PlaceHolder v.1.0

 * Author: Joonas Pääkkö

 * Website: www.joonas.me

 * Dual licensed under the MIT and GPL licenses:

 * http://www.opensource.org/licenses/mit-license.php

 * http://www.gnu.org/licenses/gpl.html

*/

(function($) {
  $.fn.extend({
    PlaceHolder: function( options ) {

      var defaults = {
      emptyOn: 'keypress',    // Functionality controllers: keypress, click, focus.
      speedIn: 400,           // Numerical value. Milliseconds.
      speedOut: 200,          // Numerical value. Milliseconds.
      suffix: false,          // This text is added after placeholder text.
      clearButton: false,     // Clickable button that enables clearing out the text field it is accosiated with.
      phClass: false,         // Meant to be used with data-attributes. Allows targeting the element's accosiated wtih it easier.
      fw: false,              // Here you can set a width that activates focus width effect in the text field. Numerical value. Pixels.
      fwSpeedIn: 900,         // Numerical value. Milliseconds.
      fwSpeedOut: 600,        // Numerical value. Milliseconds.
      fwEasing: 'swing',      // Using this with anything other than 'swing' or 'linear' will require you to add "Jquery Easing plugin" or "Jquery UI".
      // Callbacks ( Wont work with data-attributes. )
      // $(this) refers to the .placeholder-wrap element.
      // callFocus:      function() {},
      // callFocusOut:   function() {},
      // callPH_true:    function() {},
      // callPH_false:   function() {}
      callFocus: function() {
        console.log( 'callFocus' );
      },
      callFocusOut: function() {
        console.log( 'callFocusOut' );
      },
      callPH_true: function() {
        console.log( 'callPH_true' );
      },
      callPH_false: function() {
        console.log( 'callPH_false' );
      }
/*
  http://jsfiddle.net/lollero/FrbPY/
  http://jsfiddle.net/lollero/FrbPY/
 ...