Javascript 如何将文本附加到“<textarea>”?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6734579/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 22:57:56  来源:igfitidea点击:

How to append text to '<textarea>'?

javascriptjquerytextareahyperlinkadd

提问by daGrevis

I have <textarea>where user can type in his message to the world! Below, there are upload buttons... I would love to add link to uploaded file (don't worry, I have it); right next to the text that he was typing in.

我有<textarea>用户可以向世界输入他的信息的地方!下面,有上传按钮......我很想添加上传文件的链接(别担心,我有);就在他正在输入的文本旁边。

Like, he types in 'Hello, world!', then uploads the file (its done via AJAX), and the link to that file is added in next line to the content of <textarea>. Attention! Is it possible to keep cursor (place where he left to type) in the same place?

就像,他输入“Hello, world!”,然后上传文件(通过 AJAX 完成),然后在下一行将指向该文件的链接添加到<textarea>. 注意力!是否可以将光标(他留下打字的地方)保持在同一个地方?

All that may be done with jQuery... Any ideas? I know that there are method 'append()', but it won't be for this situation, right?

所有这一切都可以用 jQuery 完成……有什么想法吗?我知道有方法 'append()',但它不会用于这种情况,对吗?

回答by James McCormack

Try

尝试

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

回答by fletom

This took me a while, but the following jQuery will do exactly what you want -- it not only appends text, but also keeps the cursor in the exact same spot by storing it and then resetting it:

这花了我一段时间,但下面的 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;

You should probably wrap this in a function though.

不过,您可能应该将其包装在一个函数中。

回答by Darin Dimitrov

You may take a look at the following answerwhich presents a nice plugin for inserting text at the caret position in a <textarea>.

您可以查看以下答案,它提供了一个不错的插件,用于在<textarea>.

回答by Brad Christie

You can use any of the available caret pluginsfor jQuery and basically:

您可以使用任何可用的 jQuery插入符号插件,基本上:

  1. Store the current caret position
  2. Append the text to the textarea
  3. Use the plugin to replace the caret position
  1. 存储当前插入符号位置
  2. 将文本附加到 textarea
  3. 使用插件替换插入符号位置


If you want an "append" function in jQuery, one is easy enough to make:

如果你想要一个 jQuery 中的“追加”函数,一个很容易做到:

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

Then you can use itby making a call to .valAppend(), referencing the input field(s).

然后您可以通过调用 来使用它.valAppend(),引用输入字段。

回答by Tim Down

You could use my Rangy inputs jQuery pluginfor this, which works in all major browsers.

为此,您可以使用我的Rangy 输入 jQuery 插件,该插件适用于所有主要浏览器。

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