Copy Information From Text Fields with Button?

Question

OKAY, BIG EDIT: I think I understand the problem here, so even after changing the code previously provided so that it's selecting properly, when you copy it only copies the bottom text field. I think this is because copy just isn't supposed to work for multiple textareas at once.

My solution for this is to create a new element with JS, have what I want to copy put in that element, select and copy from there? In my head, this works, but I'm not sure how I would go about actually doing that.

Here's what I tried, but I'm sort of pulling from nothing so it's riddled with errors. I'm very new to JS so I'm sorry how much I don't understand! I used to have this code in the main.js file, but every time I mess something up in it, it throws off the whole thing so I've moved it to its own dohtml-copier.js file.

<!DOCTYPE html>
<html>
<head>
    <title>Live Editor</title>
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;700;900&display=swap" rel="stylesheet">
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script type="text/javascript" src="assets/js/jquery-ui.js"></script>
</head>
<body>
    <div class="le-header">live editor by emilie <button class="le-click" onclick="getDOHTML();">copy dohtml</button></div>
    <div class="le-wrap">
        <div class="le-result">
            <iframe id="le-preview" src="">
            <!DOCTYPE html><html>
            <head>
            </head>
            <body>
            </body>
            </html>
            </iframe>
        </div>
        <div class="le-code">
            <button class="le-tit">HTML</button>
            <div class="le-pannel">
                <textarea id="le-html" onkeyup='saveValue(this);'></textarea>
            </div>
            <button class="le-tit">CSS</button>
            <div class="le-pannel">
                <textarea id="le-css" onkeyup='saveValue(this);'></textarea>
            </div>
            <button class="le-tit">JavaScript / JQuery</button>
            <div class="le-pannel">
                <textarea id="le-js" onkeyup='saveValue(this);'></textarea>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="assets/js/main.js"></script>
    <script type="text/javascript" src="assets/js/dohtml-copier.js"></script>
</body>
</html>

function getHTML() {
        var html = $('#le-html').val();
        return html;
    }
function getCSS() {
        var html = $('#le-css').val();
        return html;
    }

function getJS() {
        var html = $('#le-js').val();
        return html;
    }
function getDOHTML() {
    var dohtml = document.createElement('dohtml');
    dohtml.append("[dohtml]<center><style>" + getCSS(); + "</style>" + getHTML(); + "<script>" + getJS(); + "<\/script></center>[/dohtml]");
    dohtml.select();
    document.execCommand("copy");
    alert("Created + Copied DOHTML");

};

the select method is to select text inside an element. It doesn't work the way u tried to use it by selecting a string so to say. Just select the text field object and then apply .select() — JSRB, Jun 22 '20 at 18:58
here you go: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select — JSRB, Jun 22 '20 at 19:02
if there are multiple text fields though, won't just selecting one mean you only get the information from the one? — Emilie Hepburn, Jun 22 '20 at 19:10
you have 3 variables var html for 3 different things, you need var html , var css , var js, for example. One was overwriting the last one... And that's for a start, not sure what else you got here... You have working examples in answers, learn from them. — ikiK, Jun 22 '20 at 20:48
oop! i didn't even notice, yes i'm looking at them and fiddling! thank you! — Emilie Hepburn, Jun 22 '20 at 21:26

score 0 · Answer 1 · answered Jun 22 '20 at 19:15

In your case you would go this way:

let textfield_one = document.getElementById('le-html');
textfield_one.select()

let textfield_two = document.getElementById('le-css');
textfield_two.select()

let textfield_three = document.getElementById('le-js');
textfield_three.select()

[..]

Otherweise you could create a list of elements and loop it like so:

var listOfElementsToLoop = [];
listOfElementsToLoop.push(document.getElementById('le-html'))
listOfElementsToLoop.push(document.getElementById('le-css'))
listOfElementsToLoop.push(document.getElementById('le-js'))

// loop the list of elements

listOfElementsToLoop.forEach(element => 
    element.select()
    etc.
    etc.
);

This does work, thank you but it brought to light a new issue. I've updated my question! — Emilie Hepburn, Jun 22 '20 at 20:41

ikiK · Answer 2 · 2020-06-22T20:28:43.793

Not sure did I understand what you need, but I made few modifications to this and resolved some errors so you have some working example to work on.

You can see it working here: jsfiddle (SO snippet is blocking iframes). Code copies all elements, gets them into iframe and even you get alert of test js from iframe, it also apply CSS for test.

You had one huge mistake targeting id's like this document.getElementById("#le-css");, you are already specifically targeting id with getElementById in plain JS so no need for marking it with #, this needs to be changed to: ("le-css"). If you use jquery then you need to specify the selector like you did $(selector).

You don't need separate functions to get values of textarea.

You can just append .value to it to get codes out of textarea.

You also need to escape script tag character in your alert like this: <\/script>, otherwise JS thinks its end of the script and produces error you got.

Hope this is on track of what are you trying to achieve.

function getDOHTML() {
 
        var html = document.getElementById("le-html").value;
        var css = document.getElementById("le-css").value;

        var js = document.getElementById("le-js").value;
 
var copyText="[dohtml]<center><style>" + css + "</style><html>" + html + "<\/html><script>" + js + "<\/script></center>[dohtml]";


var doc = document.getElementById('le-preview').contentWindow.document;
doc.open();
doc.write(copyText);
doc.close();

  alert("Created + Copied DOHTML: " + copyText);
}

<!DOCTYPE html>
<html>
<head>
    <title>Live Editor</title>
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;700;900&display=swap" rel="stylesheet">
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script type="text/javascript" src="assets/js/jquery-ui.js"></script>
</head>
<body>
    <div class="le-header">live editor by emilie <button class="le-click" onclick="getDOHTML()">copy dohtml</button></div>
    <div class="le-wrap">
        <div class="le-result">
            <iframe id="le-preview" src="">
            <!DOCTYPE html><html>
            <head>
            </head>
            <body>
            </body>
            </html>
            </iframe>
        </div>
        <div class="le-code">
            <button class="le-tit">HTML</button>
            <div class="le-pannel">
                <textarea id="le-html" rows="4" cols="70"><div id="html">test html</div>
<div id="css">test css</div>
<div id="js">test js</div></textarea>
            </div>
            <button class="le-tit">CSS</button>
            <div class="le-pannel">
                <textarea id="le-css" rows="" cols="70">#css {color:red}</textarea>
            </div>
            <button class="le-tit">JavaScript / JQuery</button>
            <div class="le-pannel">
                <textarea id="le-js" rows="6" cols="70">
var iframehtml=document.getElementById("js").innerHTML;
alert(iframehtml);

 </textarea>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>

Twisty · Answer 3 · 2020-06-23T02:00:27.817

Consider the following example.

Working Fiddle: https://jsfiddle.net/Twisty/5b3otynm/44/

$(function() {
  function getCode(tObj) {
    var t = $(tObj);
    return t.val();
  }

  function copyTxt(str) {
    var l = str.length;
    var i = $("<input>", {
      type: "text",
      style: "width: 0; height: 0;"
    }).val(str).appendTo("body").focus();
    i.get(0).setSelectionRange(0, l);
    var succeed;
    try {
      succeed = document.execCommand("copy");
    } catch (e) {
      succeed = false;
    }
    i.remove();
    return succeed;
  }

  function getDOHTML() {
    var css = $("<style>").html(getCode("#le-css"));
    var ht = getCode("#le-html");
    var js = $("<script>", {
      type: "text/javascript"
    }).html(getCode("#le-js"));
    var ct = "[dohtml]<center>" + css.prop("outerHTML") + ht + js.prop("outerHTML") + "</center>[/dohtml]";

    if (copyTxt(ct)) {
      console.log("Created + Copied DOHTML: " + ct);
    } else {
      console.log("Copy Error", ct);
    }
  }

  $(".le-click").click(getDOHTML);
});

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;700;900&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="le-header">live editor by emilie <button class="le-click">copy dohtml</button></div>
<div class="le-wrap">
  <div class="le-result">
    <iframe id="le-preview" src="">
            <!DOCTYPE html><html>
            <head>
            </head>
            <body>
            </body>
            </html>
            </iframe>
  </div>
  <div class="le-code">
    <button class="le-tit">HTML</button>
    <div class="le-pannel">
      <textarea id="le-html"><p>Hello World</p></textarea>
    </div>
    <button class="le-tit">CSS</button>
    <div class="le-pannel">
      <textarea id="le-css">p { font-weight: bold; }</textarea>
    </div>
    <button class="le-tit">JavaScript / JQuery</button>
    <div class="le-pannel">
      <textarea id="le-js">console.log("Hello World");</textarea>
    </div>
  </div>
</div>

You can get the content of a Textarea element using .val(). You can also simply pass the ID to a function if you want to target it as an jQuery Object.

Upon Paste, I get:

[dohtml]<center><style>p { font-weight: bold; }</style><p>Hello World</p><script type="text/javascript">console.log("Hello World");</script></center>[/dohtml]

Ref: Click button copy to clipboard using jQuery

Copy Information From Text Fields with Button?

3 Answers3