[英]Insert text into textarea by link
这是我的代码:
<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除外)兼容。
这是一个小提琴 。
设置attrubute数据文本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;
})
更新:
对于在textarea中添加(而不是替换文本):
$("a[data-text]").click(function(){
var value = $("#replycontent").val();
$("#replycontent").val(value+$(this).attr("data-text"));
return false;
})
通过评论更新:在新行中粘贴文本: http : //jsfiddle.net/hkEmn/
使用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 ');
}
});
您可以将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'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.