如何将文本附加到'<textarea>'？

Posted 2023-05-07

【中文标题】如何将文本附加到\'<textarea>\'？

【英文标题】：How to append text to '<textarea>'?如何将文本附加到'<textarea>'？

【发布时间】：2011-10-07 18:06:01

【问题描述】：

我有<textarea>，用户可以在其中输入他的消息给全世界！下面，有上传按钮......我很想添加上传文件的链接（别担心，我有）；就在他正在输入的文字旁边。

比如，他输入“Hello, world!”，然后上传文件（通过 AJAX 完成），该文件的链接将添加到下一行 <textarea> 的内容中。注意力！是否可以将光标（他离开的地方）保持在同一个地方？

所有这些都可以用 jQuery 完成...有什么想法吗？我知道有方法'append()'，但不会是这种情况，对吧？

【问题讨论】：

你不能将 html 添加到 ，这意味着没有 链接，你可以将 URL 放在那里，但如果你想要一个链接，它必须在 <textarea> 之外。

不，我不想那样。我希望它在输出中（毕竟提交并且其他用户查看该帖子）。

据我所知......我可以使用类似 Markdown 或 WYSIWYG 的东西。

jsfiddle.net/roXon/gejA2 (:-|)

@roXon 不能那样做。我需要将消息保存到数据库中，然后显示它并转义特殊字符（因此不允许使用 HTML）。

【参考方案1】：

试试

var myTextArea = $('#myTextarea');
myTextArea.val(myTextArea.val() + '\nYour appended stuff');

【讨论】：

但它不会随着你的文本增加而增加时间吗？

所以你搜索 DOM 两次来找到你的Textarea？不好。搜索一次并将其存储为变量。

【参考方案2】：

这花了我一些时间，但下面的 jQuery 将完全按照您的意愿行事——它不仅附加文本，而且通过存储光标然后重置它来将光标保持在完全相同的位置：

var selectionStart = $('#your_textarea')[0].selectionStart;
var selectionEnd = $('#your_textarea')[0].selectionEnd;

$('#your_textarea').val($('#your_textarea').val() + 'The text you want to append');

$('#your_textarea')[0].selectionStart = selectionStart;
$('#your_textarea')[0].selectionEnd = selectionEnd;

你应该把它包装在一个函数中。

【讨论】：

看起来棒极了！ #a 是什么意思？

@daGrevis 哎呀！我的意思是说#your_textarea，当我测试时它只是被称为#a。

selectionStart 和 selectionEnd 在 IE

真的很棒（你没有使用任何其他额外的插件），但它不支持 IE 9 <.>

@daGrevis 如果我是你，我会使用它并要求用户更新他们的浏览器以得到完全支持。界面甚至不会被完全破坏，他们只是不会保留他们的选择。这有点像给 IE 6 用户方角而不是 CSS 3 舍入。

【参考方案3】：

您可以查看following answer，它提供了一个不错的插件，用于在<textarea> 的插入符号位置插入文本。

【参考方案4】：

您可以将任何available caret plugins 用于 jQuery，基本上：

存储当前插入符号位置 将文本附加到文本区域 使用插件替换插入符号位置

---

如果你想在 jQuery 中添加一个“追加”功能，那么做起来很容易：

(function($)
    $.fn.extend(
        valAppend: function(text)
            return this.each(function(i,e)
                var $e = $(e);
                $e.val($e.val() + text);
            );
        
    );
)(jQuery);

然后您可以通过调用.valAppend() 来use it，引用输入字段。

【讨论】：

如果不让插入符号保持在同一位置...怎么办？我只是在寻找类似append() 到<textarea> 的东西。 val() 也许？

@deGrevis：除了@Darin 的帖子，您还可以使用另一个答案中的this function 将其插入到插入符号的位置。

@daGrevis textarea 的值只是一个字符串；你不需要任何特殊的“append()”函数。

@deGrevis: 或var $ta = $('textarea'); $ta.val($ta.val() + 'new text');

【参考方案5】：

您可以使用我的Rangy inputs jQuery plugin，它适用于所有主流浏览器。

var $textarea = $("your_textarea_id");
var sel = $textarea.getSelection();
$textarea.insertText("\nSome text", sel.end).setSelection(sel.start, sel.end);