Javascript 图释框单击添加到输入

我一直希望能有一双额外的眼睛，因为我被卡住了。 假设代码可以工作，因此当您单击表情符号时，：wow:将显示在输入中，但由于未知原因，我无法使其工作：

//Smiley to Input
$(function () {

    function caretPos() {
        var el = document.getElementById("chatline");
        var pos = 0;
        // IE Support
        if (document.selection) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        }
        // Firefox support
        else if (el.selectionStart || el.selectionStart == '0') pos = el.selectionStart;

        return pos;
    }

    $('#emoticons a').click(function () {
        var smiley = $(this).attr('title'),

            caretPos = caretPos(),

            strBegin = $('#chatline').val().substring(0, caretPos),
            strEnd = $('#chatline').val().substring(caretPos);

        $('#chatline').val(strBegin + " " + smiley + " " + strEnd);

    });

    //Hide and Show Smiley Box
    var $container = $('#smiley-container');
    $('#inputsmile').click(function () {
        $container.toggleClass('smileysclosed smileysopen');
    });
    $(document).click(function (event) {
        if ($container.hasClass('smileysopen') && !$(event.target).closest('.smileysopen, #inputsmile').length) {
            $container.toggleClass('smileysclosed smileysopen');
            return false;
        }
    });
});

---

这里有一个演示：

它应该像这样工作吗？就是这样，非常感谢！