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

回答

相关问题