2013-04-21 70 views
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)。這個是fiddle

+0

不知道你真正想要的是什麼,反正有正常工作的例子:http://jsfiddle.net/Gcaqe/3/ – RafH 2013-04-21 16:30:50

+0

@RafH這正是然而,我想要什麼,我注意到它得到如果我點擊了兩個鏈接,則會被替換是否有可能我可以點擊兩個鏈接,然後添加兩個文本(而不是一次被替換)? – 2013-04-21 16:32:51

+0

http://jsfiddle.net/Gcaqe/10/ – RafH 2013-04-21 16:35:45

回答

3

集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; 
}) 

http://jsfiddle.net/ZqJVN/

UPD:

對於添加(不替換文本)在textarea:

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

http://jsfiddle.net/Vxeye/

UPD的評論:在新行 粘貼文本: http://jsfiddle.net/hkEmn/

+0

你可以請更新小提琴,以便我可以測試其功能? – 2013-04-21 16:29:28

+0

這個解決方案的問題是它取代了textarea中的文本。我想**添加**文本在textarea內容的末尾。這怎麼可能? – 2013-04-21 16:34:40

+0

http://jsfiddle.net/ZqJVN/ – Mihail 2013-04-21 16:34:41

3

HTML5的使用數據屬性,然後單擊()事件..我增加了一個類<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

+0

非常好,那麼這個解決方案的兼容性呢? – 2013-04-21 16:39:48

+0

這是使用jQuery和HTML 5 ... jQuery的跨瀏覽器兼容....其中HTML5作品在所有最新的瀏覽器..如果你只需要添加文本..使用靜態文本。等待將更新我的答案 – bipen 2013-04-21 16:42:31

+1

謝謝,是否有可能通過鏈接在textarea中插入新行? – 2013-04-21 16:44:12

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() + ' '); 
}) 

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

+1

謝謝,可以通過鏈接在textarea插入一個新行嗎? – 2013-04-21 16:45:15

+0

@GaryWoods是的,當你在'val()'函數中賦值的時候,你只需要添加'\ n' – Eli 2013-04-21 16:50:38

+0

你能證明我該怎麼做,我不能讓它工作得令人驚訝。 – 2013-04-21 16:57:03