Question

问题听起来很长，但我正在寻找一个真正简单的基本解决方案。

HTML：

    <textarea id="test">Hello world</textarea>

                  <a>change</a>

jQuery：

    $('a').click(function() {

        var htmlString = '<div class="football"></div>'
        var existing = jQuery('#test').text()

        $('#test').append().text(existing + htmlString).html();

    });

这会将现有文字附加到我的htmlString变量，其中一个是我应该如何在保留现有内容的同时将htmlString添加到文本区域，还是有更好的方法？

对于我来说，将htmlString附加到光标所在的位置也很重要，它在我的实时代码中更有意义，但是你应该明白这一点，这种方法会使我的代码在上面串联这两个变量。所以我愿意接受一些想法：）

这是一个小提琴，让您更好地了解该代码的作用FIDDLE

Answer 1

Updated Demo

(function ($) {
    $.fn.getCursorPosition = function () {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
            // Standard-compliant browsers
            return input.selectionStart;
        } else if (document.selection) {
            // IE
            input.focus();
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -input.value.length);
            return sel.text.length - selLen;
        }
    }
})(jQuery);

$('a').click(function () {
    var htmlString = '<div class="football"></div>';
    var txt = $('#test').text();
    var cur_pos = $('#test').getCursorPosition();
    if (cur_pos != 0) {
        $('#test').val(txt.substring(0, cur_pos) + htmlString + txt.substring(cur_pos + 1));
    }else{
        $('#test').val(htmlString + txt);
    }
});

在保留现有文本区域内容的同时将HTML附加到文本区域，并附加到光标所在的位置？

1 个答案: