使用 Javascript 或 jQuery 前置和附加文本输入字段答案

【问题标题】：Prepend and append text input field with Javascript or jQuery使用 Javascript 或 jQuery 前置和附加文本输入字段
【发布时间】：2015-12-21 02:49:58
【问题描述】：

我已经搜索和搜索，但似乎无法找到答案，所以如果我问的问题已经得到解答，请原谅我。

我使用Tampermonkey for Chrome。这是 Greasemonkey 的 Chrome 版本。我是http://forum.xda-developers.com 论坛的常客。每当我在那个论坛上发表回复时，我都喜欢更改字体。回复编辑器有点像 Stackoverflow 上的编辑器——一个代码编辑器。因此，当您更改字体时，它的作用是在编辑器的文本字段中将字体标签包裹在您的文本周围，如下例所示：

[FONT="Arial"]This is a reply.[/FONT]

现在我想做的是使用 Javascript 或 jQuery 在页面加载时自动添加 [FONT="Arial"] 并在编辑器的文本输入字段中添加 [/FONT]。

那么，话虽如此，我会使用什么 Javascript 或 jQuery 在页面加载时自动添加和附加该文本？

【问题讨论】：

标签： javascript jquery append prepend tampermonkey

【解决方案1】：

你想要这样的东西吗？

$(document).ready(function() {
  var originalData = $('textarea').val();
  $('textarea').val('[FONT="Arial"]' + originalData + '[/FONT]');
});

/*unnecessary css, just for asthetics of code snippet*/
textarea{
  width: 300px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>Some text that is already in here</textarea>

用 VANILLA JAVASCRIPT 更新：

document.getElementById('vB_Editor_001_popup_fontname').setAttribute("onclick", "myWrappingFunction()");

function myWrappingFunction() {
  var originalData = document.getElementById('vB_Editor_001_popup_fontname').value;
  document.getElementById('vB_Editor_001_popup_fontname').value = '[FONT="Arial"]' + originalData + '[/FONT]';                        
}

/*unnecessary css, just for asthetics of code snippet*/
textarea{
  width: 300px;
  height: 100px;
}

&lt;textarea id="vB_Editor_001_popup_fontname"&gt;I am the nextarea with id vB_Editor_001_popup_fontname&lt;/textarea&gt;

【讨论】：

是的，但这似乎替换了文本区域中的所有文本。我想保留文本区域中已经存在的文本，并在现有文本周围添加和附加该文本。这有意义吗？
是的！做到了！非常感谢！
你知道如何改变 $(document).ready(function() { 以使 javascript 仅在单击这样的元素时发生吗？id="vB_Editor_001_popup_fontname"
@MisterPyrrhuloxia：是的，上面只用香草 js 更新了答案
所以我认为我不希望在单击元素 ID“vB_Editor_001_popup_fontname”之前发生前置/附加事件。我在上面使用了您的香草 javascript，但似乎没有这样做。相反，当我单击 vB_Editor_001_popup_fontname 元素时，不会发生任何前置或附加。

【解决方案2】：

你可以inject jquery到页面（如果它还不是页面的一部分）并使用

$(document).ready(function(){
    $('#textAreaID').val('[FONT="Arial"]This is a reply.[/FONT]');
});

【讨论】：