將文本和 html 復制到剪貼板
[英]Copy text and html to clipboard
問題描述
我制作了一些簡單的輸入元素，填充后將用其數據替換段落的內容。 現在我想從帶有文本和 html 的段落中復制填充的數據。
所以我已經做到了這一點，我有一個很好的工作概念，唯一阻礙我進步的是無法復制段落的 html 及其文本，這是工作概念 jsfiddle： https:// jsfiddle.net/sLa4Lqf5/和代碼：
<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>
2 個解決方案
解決方案1
0 2015-08-01 22:51:45
如果您只想手動復制 HTML 結果，您可以使用 Chrome 檢查元素並將整個字段復制（右鍵單擊、復制）到文本編輯器。
我直接從你提供的小提琴中做到了這一點。 藍色是我右鍵單擊復制的字段，右下角的灰色框是 sublime text 的復制結果。
那是你需要的嗎？
解決方案2
0 已采納 2015-08-02 19:10:23
好的，我自己找到了解決方案，將<替換為< 和>與>
編輯：這里發布了一個類似的問題和答案How to display HTML tags as plain text ，這就是我得到答案的地方！
可以將剪貼板文本/html mimetype 復制到 javascript 中的文本/純文本嗎？
[英]Possible to copy Clipboard text/html mimetype to text/plain in javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.