Question

我做了一些简单的输入元素，填充后会用其数据替换段落的内容。现在我想用带有text和html的段落复制填充的数据。

所以我已经做到了这一点，我有一个非常好的工作概念，唯一阻碍我进步的是无法复制带有文本的段落的html，这里是工作概念jsfiddle：{ {3}}和代码：

<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

如果您只想手动复制HTML结果，可以使用Chrome检查元素并将整个字段复制（右键单击，复制）到文本编辑器。

我是从你提供的小提琴中直接做到的。在蓝色是我右键单击要复制的字段，右下角的灰色框是在崇高文本上复制的结果。

这就是你需要的吗？

Answer 2

好的，我自己找到了解决方案，将<替换为<，>替换为>

编辑：类似的问题和答案都发布在How to display HTML tags as plain text，这就是我得到答案的地方！

将文本和HTML复制到剪贴板

2 个答案: