[Artur_Hopf]

Вот как это сейчас работает:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<input id="keyboard-input" type="text">
<button type="button" class="key-button-new" >1</button>
<button type="button" class="key-button-new" >2</button>
<button type="button" class="key-button-new" >3</button>
<button type="button" class="key-button-new" >4</button>
<button type="button" class="key-button-new" >5</button>
<button type="button" class="key-button-new" >6</button>
<button type="button" class="key-button-new" >7</button>
<button type="button" class="key-button-new" >del</button>
<br>
<div>Положение текста я отследил, а как вставить не знаю:<div id="text"></div></div>
<script>
$('.key-button-new').click(function(){
        var key = $(this).html();
        $("#keyboard-input").focus().val(function(i, val) {
            var cursor = val.slice(0, this.selectionStart).length;
            $("#text").html(cursor);
            if(key == 'del'){
                return val.substr(0, val.length - 1);
            }else{
                   return val + key;
            };
        });
    });
</script>

То есть если я тыкну мышкой в центр текста, а потом нажму на кнопки, новый текст вставится в конец введенного текста.

Как сделать так чтобы текст вводился там где курсор, с кнопок (button)?