问题听起来很长,但我正在寻找一个真正简单的基本解决方案。
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
答案 0 :(得分: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);
}
});