將多個值加載到textarea中
[英]Load multiple values into textarea
問題描述
所以我創建了這個網頁，您可以點擊圖片，它會為您提供一些可以復制的文本區域的代碼。 到目前為止一切都那么好......但我只是設法讓每次你點擊其中一張圖片時它取代了textarea中的當前代碼，而不是添加它。 目標是將您自己的布局放在一起並在最后復制代碼，而不是每一小段代碼。
<body>
<a class="gridstyle grid-70-30" href="#"><img src="http://www.awesome-business.com/hero/70-30.jpg" alt="" /></a>
<a class="gridstyle grid-30-70" href="#"><img src="http://www.awesome-business.com/hero/30-70.jpg" alt="" /></a>
<a class="gridstyle grid-33-33-33" href="#"><img src="http://www.awesome-business.com/hero/33-33-33.jpg" alt="" /></a>
<a class="gridstyle grid-25-25-25-25" href="#"><img src="http://www.awesome-business.com/hero/25-25-25-25.jpg" alt="" /></a>
<a class="gridstyle kategorien" href="#"><img src="http://www.awesome-business.com/hero/kategorien.jpg" alt="" /></a>
<div class="clear"></div>
<div class="textausgabe"></div>
<button class="copy">Copy Textarea</button>
<textarea id="target"></textarea>
</body>
<script id="grid-70-30" type="text/template">
<div class='grid12-8'>Hier steht Inhalt</div><div class='grid12-4'>Hier steht Inhalt</div><div class='clearer'>
</script>
<script id="grid-30-70" type="text/template">
<div class='grid12-4'>Hier steht Inhalt</div><div class='grid12-8'>Hier steht Inhalt</div><div class='clearer'>
</script>
<script id="grid-33-33-33" type="text/template">
<div class='grid12-4'>Hier steht Inhalt</div><div class='grid12-4'>Hier steht Inhalt</div><div class='grid12-4'>Hier steht Inhalt</div><div class='clearer'>
</script>
<script id="grid-25-25-25-25" type="text/template">
<div class='grid12-3'>Hier steht Inhalt</div><div class='grid12-3'>Hier steht Inhalt</div><div class='grid12-3'>Hier steht Inhalt</div><div class='grid12-3'>Hier steht Inhalt</div><div class='clearer'></div>
</script>
<script id="kategorien" type="text/template">
<div></div>
</script>
<script type="text/javascript">
jQuery("button.copy").click(function () {
jQuery("textarea#target")[0].select();
var successful = document.execCommand('copy');
if(successful) {
alert('Copied');
}
});
jQuery(".grid-70-30").click(function () {
jQuery("textarea#target").val( jQuery.trim(jQuery("#grid-70-30").html()));
});
jQuery(".grid-30-70").click(function () {
jQuery("textarea#target").val( jQuery.trim(jQuery("#grid-30-70").html()));
});
jQuery(".grid-33-33-33").click(function () {
jQuery("textarea#target").val( jQuery.trim(jQuery("#grid-33-33-33").html()));
});
jQuery(".grid-25-25-25-25").click(function () {
jQuery("textarea#target").val( jQuery.trim(jQuery("#grid-25-25-25-25").html()));
});
jQuery(".kategorien").click(function () {
jQuery("textarea#target").val( jQuery.trim(jQuery("#kategorien").html()));
});
</script>
你們有任何想法怎么做嗎？ 因為我沒有！
2 個解決方案
解決方案1
0 2017-06-20 18:02:18
只需將textarea的當前值讀入變量，將html添加（連接）到它，然后將其分配回textarea。
你可以像這樣簡化你的javascript代碼：
jQuery('.gridstyle').on('click', function(event){
var gridClass = this.className.substr(10),
selectedGridHtml = jQuery.trim(jQuery('#' + gridClass).html()) + "\n",
txtArea = jQuery('#target');
txtArea.val(txtArea.val() + selectedGridHtml);
});
我還建議使用data屬性來識別gridClass ，就像data-grid ，你可以用this.dataset.grid讀取它。
解決方案2
0 已采納 2017-06-20 18:04:36
這是一個有效的例子。 我重構了你的代碼，以保持簡單。
我已經通過將grid-*名稱從類移動到data-grid屬性來更改anchor標記。
class="gridstyle" data-grid="grid-70-30"
這樣，我們可以通過從data-grid引用它來簡單地獲取您單擊的網格類型。
var grid = $(this).attr('data-grid');
之后，我們只需為現有值添加新值。
運行Run code snippet運行Run code snippet以查看其Run code snippet 。
$('.gridstyle').click(function(e) { var grid = $(this).attr('data-grid'); var textarea = $('#target'); var oldValue = textarea.val(); var newValue = $('#' + grid).html(); textarea.val(oldValue + newValue); });
textarea { height: 100px; width: 100% }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="copy">Copy Textarea</button> <textarea id="target"></textarea> <a class="gridstyle" data-grid="grid-70-30" href="#"><img src="http://www.awesome-business.com/hero/70-30.jpg" alt="" /></a> <a class="gridstyle" data-grid="grid-30-70" href="#"><img src="http://www.awesome-business.com/hero/30-70.jpg" alt="" /></a> <a class="gridstyle" data-grid="grid-33-33-33" href="#"><img src="http://www.awesome-business.com/hero/33-33-33.jpg" alt="" /></a> <a class="gridstyle" data-grid="grid-25-25-25-25" href="#"><img src="http://www.awesome-business.com/hero/25-25-25-25.jpg" alt="" /></a> <a class="gridstyle" data-grid="kategorien" href="#"><img src="http://www.awesome-business.com/hero/kategorien.jpg" alt="" /></a> <div class="clear"></div> <div class="textausgabe"></div> <script id="grid-70-30" type="text/template"> <div class='grid12-8'>Hier steht Inhalt</div><div class='grid12-4'>Hier steht Inhalt</div><div class='clearer'> </script> <script id="grid-30-70" type="text/template"> <div class='grid12-4'>Hier steht Inhalt</div><div class='grid12-8'>Hier steht Inhalt</div><div class='clearer'> </script> <script id="grid-33-33-33" type="text/template"> <div class='grid12-4'>Hier steht Inhalt</div><div class='grid12-4'>Hier steht Inhalt</div><div class='grid12-4'>Hier steht Inhalt</div><div class='clearer'> </script> <script id="grid-25-25-25-25" type="text/template"> <div class='grid12-3'>Hier steht Inhalt</div><div class='grid12-3'>Hier steht Inhalt</div><div class='grid12-3'>Hier steht Inhalt</div><div class='grid12-3'>Hier steht Inhalt</div><div class='clearer'></div> </script> <script id="kategorien" type="text/template"> <div></div> </script>
在加載時在JavaScript中設置多個textarea元素的高度
[英]Setting height of multiple textarea elements in javascript on load
如何將tabindex上多個textarea的默認文本標記為選中？
[英]How to mark as selected the default text of multiple textarea on tabindex?
使用js / jquery無法在多個元素上獲取Codemirror textarea值
[英]Can not get Codemirror textarea Values on multiple elements using js/jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.