"merge two textarea"
Bootstrap 3.1.0 Snippet by muhittinbudak

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.7/beautify-html.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <body style="padding:30px;"> <div class="container"> <div class="row"> <div class="col-sm-4"> <h3>üst</h3> <textarea id="ust" class="form-control" rows="5" placeholder="Metin giriniz..."></textarea> </div> <div class="col-sm-4"> <h3>orta</h3> <textarea id="orta" class="form-control" rows="5" placeholder="Metin giriniz..."></textarea> </div> <div class="col-sm-4"> <h3>alt</h3> <textarea id="alt" class="form-control" rows="5" placeholder="Metin giriniz..."></textarea> </div> </div> <div class="row"> <div class="col-sm-6"> <h3>Birinci Alan</h3> <textarea id="txtArea" class="form-control" rows="5" placeholder="Metin giriniz..."></textarea> </div> <div class="col-sm-6"> <h3>İkinci Alan</h3> <textarea id="txtArea2" class="form-control" rows="5" placeholder="Metin giriniz..."></textarea> </div> </div> <div class="row" style="margin-top:20px;"> <div class="col-sm-12 text-center"> <button id="btn" class="btn btn-success">HTML Oluştur</button> <button id="kopyala" class="btn btn-primary">Panoya Kopyala</button> </div> </div> <div class="row" style="margin-top:20px;"> <div class="col-sm-12"> <div id="sonuc" class="well">Burada sonuç gözükecek...</div> </div> </div> </div> <script> </script> </body>
$(document).ready(function () { // Eğer cookie varsa textarea'lara geri yükle if ($.cookie("ust")) $("#ust").val($.cookie("ust")); if ($.cookie("orta")) $("#orta").val($.cookie("orta")); if ($.cookie("alt")) $("#alt").val($.cookie("alt")); var htmlCode = ""; $("#btn").click(function () { var ust = $("#ust").val(); var orta = $("#orta").val(); var alt = $("#alt").val(); var txt1 = $("#txtArea").val(); var txt2 = $("#txtArea2").val(); htmlCode = ust + txt1 + orta + txt2 + alt; $("#sonuc").text(htmlCode); }); $("#kopyala").click(function () { // Cookie yazma $.cookie("ust", $("#ust").val(), { expires: 7, path: '/' }); $.cookie("orta", $("#orta").val(), { expires: 7, path: '/' }); $.cookie("alt", $("#alt").val(), { expires: 7, path: '/' }); // Beautify edilmiş HTML'i kopyala var formatted = beautifyHtml(htmlCode); copyToClipboard(formatted); }); }); // Basit beautify fonksiyonu function beautifyHtml(html) { return html .replace(/></g, ">\n<") // etiketler arasına satır sonu ekle .replace(/\n\s*\n/g, "\n"); // gereksiz boşlukları temizle } // Metni kopyala fonksiyonu function copyToClipboard(text) { var tempInput = $("<textarea>"); $("body").append(tempInput); tempInput.val(text).select(); try { var success = document.execCommand("copy"); if (success) { $("#sonuc").html("<pre style='color:green'>" + text + "</pre><br><strong>Panoya kopyalandı ✔</strong>"); } else { $("#sonuc").html("<span style='color:orange'>Kopyalama başarısız!</span>"); } } catch (err) { $("#sonuc").html("<span style='color:red'>Kopyalama desteklenmiyor!</span>"); } tempInput.remove(); }

Questions / Comments: