使用按钮从文本字段中复制信息?

好的，大编辑：我想我理解这里的问题，所以即使在更改了之前提供的代码以便正确选择之后，当您复制它时，它只会复制底部的文本字段。我认为这是因为复制不应该同时适用于多个文本区域。

我的解决方案是使用 JS 创建一个新元素，将我想复制的内容放入该元素中，从那里选择并从那里复制？在我的脑海中，这有效，但我不确定我将如何实际做到这一点。

这是我尝试过的，但我有点从无到有，所以它充满了错误。我对JS很陌生，所以很抱歉我不明白！我曾经在主文件中有这段代码.js但是每次我在其中搞砸某些东西时，它都会抛弃整个东西，所以我将其移动到自己的dohtml-coppier.js文件中。

<!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");
};

在你的情况下，你会这样：

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()
[..]

或者，您可以创建一个元素列表并像这样循环它：

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.
);

不确定我是否了解您的需求，但我对此进行了一些修改并解决了一些错误，因此您有一些工作示例可以处理。

你可以在这里看到它的工作：jsfiddle(SO代码段正在阻止iframes(。代码复制所有元素，将它们放入iframe，甚至您从 iframe 收到test js警报，它还应用 CSS 进行测试。

像这样document.getElementById("#le-css");，您在针对id时犯了一个巨大的错误，您已经在普通JS中专门针对idgetElementById，因此无需用#标记它，这需要更改为：("le-css")。如果您使用jquery那么您需要像$(selector)一样指定选择器。

您不需要单独的函数来获取文本区域的值。

您只需将.value附加到它即可从textarea中获取代码。

您还需要像这样对警报中的脚本标记字符进行转义：</script>，否则 JS 会认为它的脚本结束并产生您得到的错误。

希望这符合您要实现的目标。

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>

请考虑以下示例。

工作小提琴：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>

您可以使用.val()获取文本区域元素的内容。如果你想把它作为jQuery对象，你也可以简单地将ID传递给函数。

粘贴后，我得到：

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

参考：使用 jQuery 单击按钮复制到剪贴板

相关内容

最新更新

热门标签：