JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="postText">
тестовая строчка простая<br>
тестовая строчка простая<br>
тестовая строчка простая<br>
тестовая строчка простая<br>

</div>

      <div>
                    <span class="titleLebel">
                        Полный заголовок поста (<span id="postNameСount">0</span>)
                    </span>
                    <input type="text"  id="postName" class="form-control" name="postName"  value=""  id="title" />
                </div>
             
             </body>

CSS

/* общий стиль */
    input[type="checkbox"]{zoom:1.5; }
    .hr{border-bottom: 1px solid #000}
    .block{ width: 450px; padding: 10px; border: 1px solid #000;float: right; }
    .information_json * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    /* стиль динамических полей*/
    .pull-right {float: left;}
    .form-control {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
    .btn {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
    }
    .btn-danger {
        color: #fff;
        background-color: #d9534f;
        border-color: #d43f3a;
    }
    .btn-success {
        color: #fff;
        background-color: #5cb85c;
        border-color: #4cae4c;
    }

JavaScript

var inputFocused;
    var inputFocusedNotTrueText;
    var inputFocusedDate;
    
    $('div').on('focus', '#postName',function() {

        inputFocused = $(this);
        inputFocusedNotTrueText=null;
        inputFocusedDate = null;
    });

   
    
$('#postText').on('mouseup', function(e) {

        if (inputFocused == null && !inputFocusedNotTrueText == null && !inputFocusedDate == null) {
            return false;
        }

        if (inputFocused != null) {
     
                inputFocused.val(getSelectedText()+"1");
            
        }
                count();
    });
        
       //возвращаем количество введенных  символов в поле
        function count(){
            number = $("#postName").val().length;
            if(number<150) {
                $("#postNameСount").html("<span style='color:green'>" + number + "</span>");
            }else{
                $("#postNameСount").html("<span style='color:red'>" + number + "</span>");
            }

        }
        $("#postName").on('input', count)
        
         // функция копирования выделенного участка текста
    function getSelectedText(){
        var text = "";
        if (window.getSelection) {
            text = window.getSelection();
        }else if (document.getSelection) {
            text = document.getSelection();
        }else if (document.selection) {
            text = document.selection.createRange().text;
        }
        return text;
    }