通过链接将文本插入文本区域

Posted 2023-05-07

【中文标题】通过链接将文本插入文本区域

【英文标题】：Insert text into textarea by link

【发布时间】：2013-04-14 13:05:02

【问题描述】：

这是我的代码：

<a href="">Test 1</a> Clicking this will add "Thank you" to textarea<br/>
<a href="">Test 2</a> Clicking this will add "Good luck" to textarea<br/>

<textarea rows="5" cols="40" name="replycontent" id="replycontent">Hello World</textarea>

我想通过单击链接在文本区域的末尾插入文本。所以如果你点击Test 1链接，它会插入Thank you等等。该解决方案需要兼容所有浏览器（IE6 除外）。

这是fiddle。

【问题讨论】：

不确定你真正想要什么，反正有一个可行的例子：jsfiddle.net/Gcaqe/3

@RafH 这正是我想要的，但是，我注意到如果我单击两个链接，它就会被替换。是否有可能我可以单击两个链接然后添加两个文本（而不是一次被替换）？

jsfiddle.net/Gcaqe/10

【参考方案1】：

设置属性数据-文本fot链接并尝试：

<a href="" data-text="Thank you">Test 1</a> Clicking this will add "Thank you" to textarea<br/>
<a href="" data-text="Good luck">Test 2</a> Clicking this will add "Good luck" to textarea<br/>

<textarea rows="5" cols="40" name="replycontent" id="replycontent">Hello World</textarea>

javascript：

$("a[data-text]").click(function()
  $("#replycontent").val($(this).attr("data-text"));
  return false;
)

http://jsfiddle.net/ZqJVN/

更新：

对于文本区域中的添加（不替换文本）：

$("a[data-text]").click(function()
   var value = $("#replycontent").val();
   $("#replycontent").val(value+$(this).attr("data-text"));
   return false;
 )

http://jsfiddle.net/Vxeye/

通过评论更新： 在换行中粘贴文本： http://jsfiddle.net/hkEmn/

【讨论】：

你能更新 fiddle 以便我测试它的功能吗？

这个解决方案的问题是它替换了textarea中的文本。我想在 textarea 内容的末尾添加 文本。这怎么可能？

太好了，这个解决方案的兼容性如何？

是否可以通过链接在 textarea 中插入新行？

完美，但有一个问题。我似乎无法让它在 jsfiddle 之外的任何其他地方工作。例如，在这里测试它：tinker.io/849a1你知道为什么它不起作用吗？

【参考方案2】：

使用 html5 的 data 属性和 click() 事件。我在 <a> 标签中添加了一个类以在选择器中指定。

HTML

<a href="#" class="aClass" data-text="Thank You">Test 1</a> Clicking this will add "Thank you" to textarea<br/>
<a href="#" class="aClass" data-text="Good Luck">Test 2</a> Clicking this will add "Good luck" to textarea<br/>   

JQUERY 更新为评论

jQuery('.aClass').click(function(e)
  e.preventDefault(); //to prevent the default behaviour of a tag 
  var val = jQuery('#replycontent').val(); //get prvious value
  jQuery('#replycontent').val(val + "\r\n" + jQuery(this).data('text')); //replace it.. ' ' so that there isspace beween the added text
);

更新

<a href="#" class="aClass">Test 1</a> Clicking this will add "Thank you" to textarea<br/>
<a href="#" class="aClass" >Test 2</a> Clicking this will add "Good luck" to textarea<br/> 

jquery

jQuery('.aClass').click(function(e)
   e.preventDefault(); //to prevent the default behaviour of a tag 
   var val = jQuery('#replycontent').val(); //get prvious value
   if(jQuery(this).text() == 'Test 1')
       jQuery('#replycontent').val(val + 'Thank You ');
   else
       jQuery('#replycontent').val(val + 'Good Luck ');
   
);

fiddle here

fiddle in new line

fiddle with both example

【讨论】：

很好，这个解决方案的兼容性如何？

这是使用 jquery 和 html 5... jquery 是跨浏览器兼容的.... HTML5 适用于所有最新的浏览器.. 如果您只需要添加文本.. 使用静态文本.等待会更新我的答案

谢谢，是否可以通过链接在文本区域中插入新行？

完美，不过有一个问题。我似乎无法让它在 jsfiddle 之外的任何其他地方工作。例如，在这里测试它：tinker.io/06b29 你知道它为什么不起作用吗？一定是我错过的东西。

那是因为您还没有在其中加载 jquery 字段...这是工作示例tinker.io/06b29/1.. 您需要在设置 > 资产中添加 jquery.js...

【参考方案3】：

您可以在要附加的特定单词中添加span 标签：

<a href="">Test 1</a> Clicking this will add "<span>Thank you</span>" to textarea<br/>
<a href="">Test 2</a> Clicking this will add "<span>Good luck</span>" to textarea<br/>

然后你可以使用 append():

$("a").on('click',function(e) 
    e.preventDefault();
   $("#replycontent").append($(this).next('span').text() + ' ');
)

FIDDLE

---

或者更好的是，你可以为你的锚使用 HTML5 数据属性：

<a href="" data-text="Thank you">Test 1</a> Clicking this will add "Thank you" to textarea<br/>
<a href="" data-text="Good luck">Test 2</a> Clicking this will add "Good luck" to textarea<br/>

那么你可以这样做：

$('a').click(function(e)
     e.preventDefault(); 
     var val = $('#replycontent').val();
     $('#replycontent').val(val + $(this).data('text') + ' ');
);

FIDDLE

---

编辑

如果您想在将新值附加到 textarea 时添加新行，只需使用 \n 和附加值即可：

$('#replycontent').val(val + '\n' + $(this).data('text'));

Updated Fiddle

【讨论】：

谢谢，是否可以通过链接在文本区域中插入新行？

@GaryWoods 是的，你只需要在val()函数中赋值时加上\n

您能否演示一下我将如何做到这一点，我无法让它工作得令人惊讶。

这正是我一直在寻找的，只是一个问题，我似乎无法在我的网站上运行它，它似乎只适用于 jsfiddle，例如，请参阅：tinker.io/ee73f Do你知道为什么它不起作用吗？

我发现问题出在哪里，Wordpress 管理区域（我执行此脚本的地方）似乎在 NoConflict Mode 下运行，这意味着没有$，但是而不是jQuery。您能否用这个小提琴更改更新您的问题，我会接受它是正确的。