Как при вводе цифры в contenteditable div вместо цифры вставить input с этой цифрой на место каретки?

Есть <div id="board" contenteditable="true"></div> и jquery функция, которая отслеживает ввод пользователя:

function getChar(event) { //возвращает вводимый символ
    if (event.which == null) { // IE
        if (event.keyCode < 32) { return null; } // спец. символ
        return String.fromCharCode(event.keyCode)
    }
    if (event.which != 0 && event.charCode != 0) {
        if (event.which < 32) { return null; }
        return String.fromCharCode(event.which);
    }
    return null;
}
$('#board').on('keypress', function (k) {
    var char = getChar(k); //получает символ
    if (!isNaN(char) && !$('#board input').is(':focus')) { //проверяет чтобы символ был числовым и вводился внутри #board, но не #board input
        $('#board').append('<input type="number">');
        $('#board input').focus();
    }
});

Этот JS при вводе цифры в #board помещает в него input и помещает эту цифру внутри input и устанавливает внутрь этого input каретку и это работает как надо, но проблема в том, что если я ввожу цифру не в конце текста в #board, а например в середине, то он все равно добавляет input в конец, а надо на текущее место каретки в #board.
Вопрос: как добавлять input при вводе цифры на текущее место каретки в #board, а не всегда в конец?