onclick将<a>item</a>文本附加到textarea

时间:2017-06-19 17:29:00

标签: javascript jquery html

现在正在寻找一个小时,仍然找不到一个简单的解决方案, 似乎人们建议使用jquery和长脚本对我来说真的没有意义;

对不起,如果我对此一无所知!

我正在尝试做的事情应该相当简单,如果有人可以介入并完成javascript部分,我会非常感激。我不得不承认,我缺乏这方面的技能或知识,而且我所做的研究已经引导我找到了我无法与我想要做的事情相结合的答案。

sudo awk -i inplace '
BEGIN { FS=OFS="="; game_mem=156; desk_mem=512 }
(ARGIND == 1) && ($1 == "gpu_mem") {
    if ( $2 == game_mem ) {
        $2 = desk_mem
        mode = "Desktop"
    }
    else {
        $2 = game_mem
        mode = "Game"
    }
}
(ARGIND == 2) && ($1 == "Name[en_GB.UTF-8]") {
    $2 = mode " Mode"
}
{ print }
' /boot/config.txt /home/pi/Desktop/GPUMode.desktop
用简单的话说: onclick追加并将文本添加到textarea 类似于购物清单,您可以点击某个元素,然后点击将自动添加到列表中。

(牛奶,糖,培根等)。

提前感谢!

4 个答案:

答案 0 :(得分:1)

这样的事情:不需要jQuery或其他库。

&#13;
&#13;
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;
    });
});
&#13;
#cartlist {
    width: 100%;
    height: 100px;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

$('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>

答案 2 :(得分:0)

使用简单的纯js功能,你可以做到这一点

&#13;
&#13;
function CopyToTextarea(el){
  var text = el.textContent;
  var textarea = document.getElementById('cartlist');
  textarea.value = textarea.value + text +'\n';
}
&#13;
#cartlist{
  width : 100%;
  height : 100px;
  line-height : 30px;
}
&#13;
<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>
&#13;
&#13;
&#13;

更新#1 直到OP评论有没有办法确定我是否再次点击它,而不是采取行动并从列表中删除该项?

&#13;
&#13;
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
}
&#13;
#cartlist{
  width : 100%;
  height : 100px;
  line-height : 30px;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

你走了。

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>