JSFiddle - React, Tailwind, and code Playground

by Arvind Pal

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div ng-app="appp">
<input id="texta" rows="7" placeholder="this is place holder">
<button id="btn">
click me
</button>
</div>

JavaScript

$(document).ready(function(){
    $("#btn").click(function(){
        alert($("textarea").val());
    });
});

angular.module('appp', []).directive('placeholder', ['$compile', function($compile) {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                var isInputSupported = 'placeholder' in document.createElement('input');
                var isTextareaSupported = 'placeholder' in document.createElement('textarea');

                console.log("isInputSupported ==> ",isInputSupported);

                console.log("isTextareaSupported ==> ",isTextareaSupported);

                if (!isInputSupported || !isTextareaSupported) {
                    //$(element).attr('placeholder')
                    var placeholderVal = attrs.placeholder,
                        defaultColor = $(element).css('color');

                    if ($.trim($(element).val()) == "") {
                        setTimeout(function(){
                            $(element)
                                .val(placeholderVal)
                                .css({
                                    'color': '#75787E', 
                                    'opacity': '0.8'
                                });
                        },0)
                    }

                    $(element).unbind('click').bind('click', function() {
                        if ($(element).val() === placeholderVal) {
                            $(element)
                                .val("")
                                .css({
                                    'color': '', 
                                    'opacity': '1'
                                });
                        }
                    });

                    $(element).unbind('focus').bind('focus', function() {
                        if ($(element).val() === placeholderVal) {
                            $(element)
                                .val("")
                       ...