Ввод текста в определенное место input

[Artur_Hopf]

Добрый день. Есть input, текст в который вводится из события click:

<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>
<script>
$('.key-button-new').click(function(){
        var key = $(this).html();
        $("#keyboard-input").focus().val(function(i, val) {
            return val + key;
        });
});
</script>

Подскажите пожалуйста как вводить в input туда, куда ткнули мышкой?
Например ввели слово, а там ошибка, ткнули в место ошибки и исправили с события click.

[Artur_Hopf]

Местоположение курсора нашел, а вот как заставить его туда писать, не знаю:

$('.key-button-new').click(function(){
        var key = $(this).html();
        $("#keyboard-input").focus().val(function(i, val) {
            var cursor = val.slice(0, this.selectionStart).length;//место курсора в input 
            console.log(cursor);
            return val + key;
        });
});

[Dilettante_Pro]

как вводить в input туда, куда ткнули мышкой?

Инпут сам по себе так и работает.

<input id="keyboard-input" type="text">

Например ввели слово, а там ошибка, ткнули в место ошибки и исправили с события click.

Кто знает про ошибку? Скрипт или человек? Скрипт может заменить неправильное слово целиком.
Человек может исправить - смотри выше.

Непонятна проблема.
И скрипт в пост 1 непонятный - что он делает и зачем?

[Artur_Hopf]

Dilettante_Pro,
Я о том чтобы вводит с кнопки тыкая мышкой, допустим нет клавиатуры. А ошибка это человек, написал случайной прэвед, надо исправить э, ткнул мышкой туда, 2 символ и исправил. Так вот как отследить и исправить, я пока дошел до этого, но не работает:

$('.key-button-new').click(function(){
        var key = $(this).html();
        $("#keyboard-input").focus().val(function(i, val) {
            var cursor = val.slice(0, this.selectionStart).length;
            console.log(cursor);
            return val.splice(cursor, 0, key);
            //return val + key;
        });
    });

[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)?

[Dilettante_Pro]

Вставить можно так

<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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('.key-button-new').click(function(){
        var key = $(this).html();
        $("#keyboard-input").focus().val(function(i, val) {
            
            var begin = val.slice(0, this.selectionStart);

            var end = val.slice( this.selectionStart, val.length );
console.log(begin + " " + end);
            return begin + key + end;
        });
});
</script>

[Artur_Hopf]

Dilettante_Pro,
Спасибо большое, а чтоб курсор потом там же остался?

[рони]

Artur_Hopf,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
$('.key-button-new').click(function(){
    var key = this.innerHTML;
    var target = document.querySelector("#keyboard-input"),
    text = target.value,
    caretPos = target.selectionStart,
    caretPosEnd = target.selectionEnd;
    target.value = text.substr(0, caretPos) + key + text.substr(caretPosEnd);
    caretPos += key.length;
    target.focus();
    target.setSelectionRange(caretPos, caretPos)

});
});
  </script>
</head>

<body>
<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>

</body>
</html>

[Artur_Hopf]

рони,
Спасибо, буду разбираться как это работает