0

这是我的代码：

<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）兼容。

这是一个小提琴。

4

3 回答 3

3

设置属性数据文本 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/

更新：

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

$("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/

于 2013-04-21T16:28:00.410 回答
3

使用 HTML5 的数据属性和 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 ');
   }
});

在这里摆弄

拨弄新线

摆弄两个例子

于 2013-04-21T16:37:51.990 回答
2

您可以将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() + ' ');
})

小提琴

或者更好的是，您可以为锚点使用 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') + ' ');
});

小提琴

编辑

如果您想在将新值附加到您的 时添加新行textarea，则只需\n与附加值一起使用：

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

更新小提琴

于 2013-04-21T16:39:20.090 回答