2

質問は長く聞こえますが、本当にシンプルで基本的な解決策を探しています。

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

4

1 に答える 1

3

更新されたデモ

(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);
    }
});
于 2013-09-11T07:52:04.450 に答える