JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<textarea>asdasdasd</textarea>

CSS

textarea {
margin: 0;
position: relative;
width: 318px;
height: 102px;
padding: 7px 7px 3px 32px;
border: 0;
outline: none;
resize: none;
font-size: 1em;
line-height: 1.2em;
color: #666666;
font-size: 0.9em;            
    border: 1px solid #000;
}

.thedamnclass {
    padding-top: 150px;
    height: 50px;
}

JavaScript

var MAX_LENGTH = 140,
        chase_reply = "@ChaseGiving ",
        chase_hash_link = " #InOnTheGiving http://bit.ly/MrSmEr",
        $tweet_textarea = $('textarea');

    function statusText() {
        return $('textarea', '.tweet-container').val();
    }

    function moveCaretToEnd(el) {
        if (typeof el.selectionStart == "number") {
            el.selectionStart = el.selectionEnd = el.value.length;
        } else if (typeof el.createTextRange != "undefined") {
            el.focus();
            var range = el.createTextRange();
            range.collapse(false);
            range.select();
        }
    }

    $($tweet_textarea).val(chase_reply + "[Type your message in here]");
    
    $($tweet_textarea).on('focus', function(e) {
        if ( $tweet_textarea.val() === (chase_reply + "[Type your message in here]") )  {
            $tweet_textarea.val(chase_reply);
            $tweet_textarea.css({'width': '371px', 'height': '40px', 'padding-top': '3px', 'padding-left': '7px'});
        }

        moveCaretToEnd($tweet_textarea[0]);
        // Work around Chrome's little problem
        window.setTimeout(function() {
            moveCaretToEnd($tweet_textarea[0]);
        }, 1);
    });
    
    $($tweet_textarea).on('keyup paste', function(e) {

        if ($tweet_textarea.val().length > (MAX_LENGTH - chase_hash_link.length) ) {
          $(this).val( $(this).val().substring(chase_reply, (MAX_LENGTH - chase_hash_link.length)) );
        } else if ($(this).val().length < chase_reply.length) {
                $(this).val(chase_reply);
            }

      });

    $tweet_textarea.css({'width': '293px', 'height': '28px', 'padding-top': '16px', 'padding-left': '85px'});

    $($tweet_textarea).on('blur', function(e) {
        if ( $tweet_textarea.val() === chase_reply )  {
            $tweet_textarea.val(chase_reply + "[Type your message in here]");
            $tweet_textarea.css({'width': '293px', 'height': '28px', 'padding-top': '16px', 'padding-left':...