JSFiddle - React, Tailwind, and code Playground

by cwolves

HTML

<form action="/echo/html/">
    <p><input placeholder="Your name" name="name" value="" />
<input placeholder="email@example.com" name="email"/>
    <input type="submit" value="Submit" /></p>
</form>

<p class="output">USING NATIVE PLACEHOLDER, THIS DEMO WILL NOT WORK!!</p>



<script>
    if ( ! ('placeholder' in document.createElement('input'))) {$('.output').text('USING JAVASCRIPT PLACEHOLDER');}        
$('form').submit(function (e) {
    e.preventDefault();
    $('.output').text($(this).serialize());
    $.post('/echo/html/', {html: $(this).serialize()}, function (data) {
        alert(data);
    }, 'html');
    });


</script>


<ul>
    <li>Make sure to try submitting email@example.com, in reality it should work.</li>
</ul>

CSS

[placeholder]{color:green}/* Actual input */
.placeholder{color:red}/* Placeholder text */

JavaScript

$.fn.inactiveText = function(inactiveClass, defaultValue){
    var a, b;
    this
        .data    ('defaultValue', defaultValue)
        .addClass('inactive')
        .focus(a=function(){
            var $this = $(this);
            if($this.hasClass(inactiveClass)){
                (valFn.apply($this) == defaultValue) && $this.val('');
                (valFn.apply($this) != defaultValue) && $this.removeClass(inactiveClass);
            }
//            $this.hasClass(inactiveClass) && $this.valueIs(defaultValue).val('').end().valueIsNot(defaultValue).removeClass(inactiveClass);
        })
        .blur(b=function(){
            var $this = $(this);
            this.value || $this.addClass(inactiveClass).val(defaultValue);
        });
    this.each(a);
    this.each(b);

    this.setDefaultValue = function(d){
        this.each(a);
        defaultValue = d;
        this.each(b);
    };

    return this;
};

var valFn = $.fn.val;

$.fn.val = function(v){
    if(typeof(v) == 'undefined'){
        var val = valFn.apply(this, arguments);
        return val == this.data('defaultValue') ? '' : val;
    }

    return valFn.apply(this, arguments);
};


// Don't bother if the browser already supports it
if ( ! ('placeholder' in document.createElement('input'))) {

    $('[placeholder]').inactiveText('placeholder', 'myemail@example.com');
}