onclick append <a> item</a> text to textarea

-1

已經搜索了一個小時，仍然找不到一個簡單的解決方案，好像人們建議使用jquery和長腳本，這對我來說真的沒有意義;onclick append <a> item</a> text to textarea

對不起，如果我對此一無所知！

我想要做的事情應該相當簡單，並會真誠地感謝它，如果有人可以介入並完成JavaScript部分。我不得不承認，我缺乏這方面的技能或知識，而我所做的研究已經讓我回答了我無法與我想要做的事情相結合的答案。

<textarea id="cartlist">items will be copied here when you click on them</textarea> 
<a href="#" onclick="trigger the add to list function">item name 1</a> 
<a href="#" onclick="trigger the add to list function">item name 2</a> 
<a href="#" onclick="trigger the add to list function">item name 3</a> 
<a href="#" onclick="trigger the add to list function">item name 4</a>

在簡單的話：的onclick追加和添加文本的textarea 類似於一個購物清單，在那裏你可以某一個元素上點擊的onclick將被自動添加到列表中。

（牛奶，糖，培根等）

在此先感謝！

來源

2017-06-19 user3151178

你能改一下你的問題嗎？我無法理解你的目的。你想達到什麼？！ –

請查看[問]。看起來你並沒有真正問過一個問題。一定要包含一個[mcve]，顯示你已經嘗試了什麼，以及你遇到了哪些麻煩。請注意[我們希望你已經把自己的時間投入到研究中]（https://meta.stackoverflow.com/a/261593/497418）。 – zzzzBov

看起來你要求我們編碼...寫自己的代碼 –

通過簡單純粹的JS函數，你可以做到這一點

function CopyToTextarea(el){ 
 
    var text = el.textContent; 
 
    var textarea = document.getElementById('cartlist'); 
 
    textarea.value = textarea.value + text +'\n'; 
 
}

#cartlist{ 
 
    width : 100%; 
 
    height : 100px; 
 
    line-height : 30px; 
 
}

<textarea id="cartlist"></textarea> 
 
<a href="#" onclick="CopyToTextarea(this)">item name 1</a> 
 
<a href="#" onclick="CopyToTextarea(this)">item name 2</a> 
 
<a href="#" onclick="CopyToTextarea(this)">item name 3</a> 
 
<a href="#" onclick="CopyToTextarea(this)">item name 4</a>

更新＃1高達OP評論有什麼辦法確定我是否點擊它再次，比它會採取行動，並從列表中刪除項目？

function CopyToTextarea(el){ 
 
    var text = el.textContent,       // get this <a> text 
 
     textarea = document.getElementById('cartlist'), // textarea id 
 
     textareaValue = textarea.value,     // text area value 
 
     Regex = new RegExp(text + '\n', 'g'),   // make new regex with <a> text and \n line break 
 
     textareaValue = textareaValue.indexOf(text+'\n') > -1 ? textareaValue.replace(Regex, '') : textareaValue + text+'\n'; // this is something similar to if statement .. mean if the textarea has the <a> text and after it line break .. replace it with its line break to blank (remove it) .. if not its not on textarea add this <a> text to the textarea value 
 
    textarea.value = textareaValue ;      // change the textarea value with the new one 
 
}

#cartlist{ 
 
    width : 100%; 
 
    height : 100px; 
 
    line-height : 30px; 
 
}

<textarea id="cartlist"></textarea> 
 
<a href="#" onclick="CopyToTextarea(this)">item name 1</a> 
 
<a href="#" onclick="CopyToTextarea(this)">item name 2</a> 
 
<a href="#" onclick="CopyToTextarea(this)">item name 3</a> 
 
<a href="#" onclick="CopyToTextarea(this)">item name 4</a>

來源

2017-06-19 17:42:46

哇，非常感謝良好的先生，正是我所期待的。 – user3151178

@ user3151178不客氣，但這個答案很簡單，因爲你只需要添加/添加項目到textarea ..你之前讀過的長答案肯定是因爲檢查...像是如果添加的項目不再添加它或類似的東西..這就是爲什麼另一個代碼可能會很長..有一個偉大的一天:-) –

工作像一個魅力，我的下面的問題是 - 是否有任何方法來確定我是否再次點擊它，比它會採取行動，並從列表中刪除項目？ – user3151178

$('a').click(function(e) { 
 
    var txtarea = $('#cartlist').val(); 
 
    var txt = $(e.target).text(); 
 
    $('#cartlist').val(txtarea + txt + '\n'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<textarea id="cartlist"></textarea> 
 
<a href="#">item name 1</a> 
 
<a href="#">item name 2</a> 
 
<a href="#">item name 3</a> 
 
<a href="#">item name 4</a>

來源

2017-06-19 17:42:02 Raj

非常感謝Raj！ – user3151178

事情是這樣的：沒有必要的jQuery或其他庫。

var cartlist = document.querySelector('#cartlist'); 
 
var items = document.querySelectorAll('[data-item]'); 
 

 
[].forEach.call(items, function(item) { 
 
    item.addEventListener('click', function(){ 
 
     cartlist.value += "\n" + item.innerHTML; 
 
    }); 
 
});

#cartlist { 
 
    width: 100%; 
 
    height: 100px; 
 
}

<textarea id="cartlist">items will be copied here when you click on them</textarea> 
 
<br /> 
 
<a href="#" data-item="1">item name 1</a> 
 
<a href="#" data-item="2">item name 2</a> 
 
<a href="#" data-item="3">item name 3</a> 
 
<a href="#" data-item="4">item name 4</a>

來源

2017-06-19 17:44:25 caramba

在這裏你去。

var cartElement = document.getElementById("cartlist"); 
 

 
function trigger(event) { 
 
    var item = event.innerHTML; 
 
    cartElement.append(item + "\n"); 
 
}

<textarea id="cartlist"></textarea> 
 
<a href="#" onclick="trigger(this)">item name 1</a> 
 
<a href="#" onclick="trigger(this)">item name 2</a> 
 
<a href="#" onclick="trigger(this)">item name 3</a> 
 
<a href="#" onclick="trigger(this)">item name 4</a>

來源

2017-06-19 17:53:41

onclick append <a> item</a> text to textarea

回答

相關問題