Copy text and html to clipboard

Question

I made a few simple input elements that when filled will replace the contents of a paragraph with its data. Now I want to copy that filled data from a paragraph with text and html.

So I have made it this far, and I have a pretty well working concept, the only thing that is hindering my progress is the inability to copy the html of a paragraph with its text, here is the working concept jsfiddle: https://jsfiddle.net/sLa4Lqf5/ and the code:

<body>

        <div id="inputmeasurements" style="width: 260px;">
                        <p align=right>
                        TITLE:<input type="text" class="topm" id="title" name="title" maxlength="80"><br>
                        SPECIFICS:<input type="text" class="topm" id="specifics" name="specifics"><br>
                        LABEL:<input type="text" class="topm" id="label" name="label"><br>
                        </p>
                        <p align=right style="margin-right: 135px;">
                        Bust:<input type="text" class="botm" id="bust" name="bust"><br>
                        Waist:<input type="text" class="botm" id="waist" name="waist"><br>
                        Hips:<input type="text" class="botm" id="hips" name="hips"><br>
                        Lenght:<input type="text" class="botm" id="lng" name="lenght"><br>
                        Shoulders:<input type="text" class="botm" id="shl" name="shoulders"><br>
                        Sleeves:<input type="text" class="botm" id="slv" name="sleeves"><br>
                        Inseam:<input type="text" class="botm" id="ins" name="inseam"><br>
                        </p>
        </div>
        <div id="finishedmeasurements" style="width: 300px; display:none;">
            <table id="grid" style="width: 300px; border: 0px;">
                <tr onclick="clipboard(this);">
                    <td>
                         <p id="m1" align=center><FONT size=3 face=Trebuchet MS>
                        TITLE</br>
                        SPECIFICS</br>
                        LABEL</br></br>
                        B1 Bust inches flat</br>
                        W1 Waist inches flat</br>
                        H1 Hips inches flat</br>
                        L1 Length </br>
                        S1 Shoulders </br>
                        S2 Sleeves </br>
                        I1 Inseam </br>
                        </FONT></p>
                    </td>
                </tr>
             </table>
        </div>


<p>This is a test for measurements to metadata</p>
<button onclick="myFunction2();switchVisible();">Enter</button>

<script>
function myFunction2() {
    var str = document.getElementById("m1").innerHTML; 
    var res = str.replace(/B1/g, document.getElementById("bust").value).replace(/W1/g, document.getElementById("waist").value).replace(/H1/g, document.getElementById("hips").value).replace(/L1/g,document.getElementById("lng").value)
    .replace(/S1/g, document.getElementById("shl").value).replace(/S2/g, document.getElementById("slv").value).replace(/I1/g, document.getElementById("ins").value)
    .replace("TITLE", document.getElementById("title").value).replace("SPECIFICS", document.getElementById("specifics").value).replace("LABEL", document.getElementById("label").value);
    document.getElementById("m1").innerHTML = res;
}
</script>
<button onclick="myFunction3()">New</button>
<script>
function myFunction3() {
    window.location.reload();
}
</script>

<script>
    function switchVisible() {
            if (document.getElementById('inputmeasurements')) {

                if (document.getElementById('inputmeasurements').style.display == 'none') {
                    document.getElementById('inputmeasurements').style.display = 'block';
                    document.getElementById('finishedmeasurements').style.display = 'none';
                }
                else {
                    document.getElementById('inputmeasurements').style.display = 'none';
                    document.getElementById('finishedmeasurements').style.display = 'block';
                }
            }
}
</script>

<script>
function TrelloClipboard() {
    var me = this;

    var utils = {
        nodeName: function (node, name) {
            return !!(node.nodeName.toLowerCase() === name)
        }
    }
    var textareaId = 'simulate-trello-clipboard',
        containerId = textareaId + '-container',
        container, textarea

    var createTextarea = function () {
        container = document.querySelector('#' + containerId)
        if (!container) {
            container = document.createElement('div')
            container.id = containerId
            container.setAttribute('style', [, 'position: fixed;', 'left: 0px;', 'top: 0px;', 'width: 0px;', 'height: 0px;', 'z-index: 100;', 'opacity: 0;'].join(''))
            document.body.appendChild(container)
        }
        container.style.display = 'block'
        textarea = document.createElement('textarea')
        textarea.setAttribute('style', [, 'width: 1px;', 'height: 1px;', 'padding: 0px;'].join(''))
        textarea.id = textareaId
        container.innerHTML = ''
        container.appendChild(textarea)

        textarea.appendChild(document.createTextNode(me.value))
        textarea.focus()
        textarea.select()
    }

    var keyDonwMonitor = function (e) {
        var code = e.keyCode || e.which;
        if (!(e.ctrlKey || e.metaKey)) {
            return
        }
        var target = e.target
        if (utils.nodeName(target, 'textarea') || utils.nodeName(target, 'input')) {
            return
        }
        if (window.getSelection && window.getSelection() && window.getSelection().toString()) {
            return
        }
        if (document.selection && document.selection.createRange().text) {
            return
        }
        setTimeout(createTextarea, 0)
    }

    var keyUpMonitor = function (e) {
        var code = e.keyCode || e.which;
        if (e.target.id !== textareaId) {
            return
        }
        container.style.display = 'none'
    }

    document.addEventListener('keydown', keyDonwMonitor)
    document.addEventListener('keyup', keyUpMonitor)
}

TrelloClipboard.prototype.setValue = function (value) {
    this.value = value;
}

var clip = new TrelloClipboard();

function clipboard(el) {
    // deselect all
    var selected = document.getElementsByClassName("selected");
    for (var i = 0; i < selected.length; i++) {
        selected[i].className = '';
    };
    el.className = 'selected'
    clip.setValue(el.innerText);
}
</script>

</body>


<style>
#finishedmeasurements {
    font-family: Trebuchet MS;
    line-height: 24px;
}
#inputmeasurements {
    font-family: Trebuchet MS;
    padding-right: 20px;
    line-height: 23px;
}
.botm {
    width: 33px;
    margin-left: 5px;
}
.wideinput {
    width: 200px !important;
}
.selected {
    background: #ddd;
}
</style>

Answer 1

If you just want to copy the HTML results manually you can inspect the element with Chrome and copy (right-click, copy) the entire field to a text-editor.

I did this straight from the fiddle you provided. In blue is the field I right-clicked to copy and the gray box on the bottom right is the copied results on sublime text.

Is that what you needed?

Answer 2

Ok, I've found the solution by myself, by replacing < with < and > with >

Edit: A similar question and the answer were posted here How to display HTML tags as plain text , and that is where I got the answer from!

Copy text and html to clipboard

Question

2 answers

solution1
0 2015-08-01 22:51:45

solution2
0 ACCPTED 2015-08-02 19:10:23

Copy text and html to clipboard

Question

2 answers

solution1 0 2015-08-01 22:51:45

solution2 0 ACCPTED 2015-08-02 19:10:23

solution1
0 2015-08-01 22:51:45

solution2
0 ACCPTED 2015-08-02 19:10:23