JSFiddle - React, Tailwind, and code Playground

by Radonirina Maminiaina

HTML

<form action="index.php" method="post">
    <textarea name="userGroup"></textarea>
    <div id="result"></div>
</form>

CSS

form {
    position: relative;
    height: 150px;
}
form textarea {
    background: transparent;
    border: 1px #ddd solid;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 400px;
    height: 120px;
    font: normal 14px Arial;
    z-index: 2;
}
form #result {
    position: absolute;
    top: 13px;
    left: 13px;
    font: normal 14px Arial;
    color: transparent;
}
#result a {
    display: inline-block;
    color: #000;
    text-decoration: none;
    font: normal 14px Arial;
    background: #d8dfea;
    background: -webkit-gradient(linear, center top, center bottom, from(#dce6f8), to(#bdcff1));
    background: -webkit-linear-gradient(#dce6f8, #bdcff1);
    -webkit-border-radius: 2px;
    -webkit-box-shadow: 0 0 0 1px #a3bcea;
    font-weight: normal;
    color: transparent;
}
p {
    font: normal 14px Arial;
}
a {
    text-decoration: none;
}

JavaScript

$(
    function() {


        $('textarea').on('keyup',
            function(e) {
                var valueOfThis = $(this).val();
                var key = e.which;
                var patternUserGroup = /#([\w]+)/g;
                var self = this;



                if ( key == 13 ) {
                    $(this).parent().submit();
                }

                $('#result').html(valueOfThis.replace(patternUserGroup, '<a href="" title="$1 is the name" class="test_$1">#$1</a>'.trim()));
                $('#result').find('a').each(
                    function() {
                        var self = this;
                        // http://stackoverflow.com/questions/24495012/removing-the-whole-word-from-textarea-while-pressing-backspace
                        if (e.which == 8) {
                            e.preventDefault();
                            var text = $(self).text().split(' ');
                            text.splice(text.length-1);
                            $(self).text(text.join(' '));
                        }
                    }
                );
            }
        );
    }
);