实现方式并非这一种，下面代码仅供参考。
<!DOCTYPE html>
<html>
<head>
<meta content="‘text/html;" charset="utf-8" http-equiv="Content-Type" />
<title>测试代码</title>
<script>
//运行代码
function doRun(param) {
cod=document.getElementById(param)
var code=cod.value;
if (code!=""){
var newwin=window.open(‘‘,‘‘,‘‘);
newwin.opener = null
newwin.document.write(code);
newwin.document.close();
}
}
//复制代码
function doCopy(param) {
if (document.all){
textRange = document.getElementById(param).createTextRange();
textRange.execCommand("Copy");
}
else{
//alert("此功能只能在IE上有效");
copyToClipboard(document.getElementById(param).value);
}
}
//另存为代码
function saveCode(param) {
cod=document.getElementById(param)
var code=cod.value;
if (code!=""){
var winname = window.open(‘‘, ‘_blank‘, ‘top=10000‘);
winname.document.open(‘text/html‘, ‘replace‘);
winname.document.write(code);
winname.document.execCommand(‘saveas‘,‘‘,‘code.htm‘);
winname.close();
}
}
function copyToClipboard(txt) {
if(window.clipboardData) {
window.clipboardData.clearData();
window.clipboardData.setData("Text", txt);
} else if(navigator.userAgent.indexOf("Opera") != -1) {
window.location = txt;
} else if (window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert("被浏览器拒绝！\n请在浏览器地址栏输入‘about:config‘并回车\n然后将‘signed.applets.codebase_principal_support‘设置为‘true‘");
}
var clip = Components.classes[‘@mozilla.org/widget/clipboard;1‘].createInstance(Components.interfaces.nsIClipboard);
if (!clip)
return;
var trans = Components.classes[‘@mozilla.org/widget/transferable;1‘].createInstance(Components.interfaces.nsITransferable);
if (!trans)
return;
trans.addDataFlavor(‘text/unicode‘);
var str = new Object();
var len = new Object();
var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
var copytext = txt;
str.data = copytext;
trans.setTransferData("text/unicode",str,copytext.length*2);
var clipid = Components.interfaces.nsIClipboard;
if (!clip)
return false;
clip.setData(trans,null,clipid.kGlobalClipboard);
}
}
</script>
<style>
.btn {
background-color: #A5A5A5; /* Green */
//border: none;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.textarea {
background-color: #CCE8CF;
padding: 5px 10px;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
<script>
/* 实现方式二
// window.open 弹出新窗口的命令；
// ‘page.html‘ 弹出窗口的文件名；
// ‘newwindow‘ 弹出窗口的名字（不是文件名），非必须，可用空‘‘代替；
// height=100 窗口高度；
// width=400 窗口宽度；
// top=0 窗口距离屏幕上方的象素值；
// left=0 窗口距离屏幕左侧的象素值；
// toolbar=no 是否显示工具栏，yes为显示；
// menubar，scrollbars 表示菜单栏和滚动栏。
// resizable=no 是否允许改变窗口大小，yes为允许；
// location=no 是否显示地址栏，yes为允许；
// status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
function doRun() {
var winEx2 =window.open(‘‘, ‘newwindow‘, ‘height=300, width=400, top=200px, left=300px, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no‘);
//window.open("", "winEx2", "width=500,height=300,status=yes,menubar=no,scrollbars=yes,resizable=yes");
//window.open(‘‘, ‘newwindow‘, ‘height=300, width=400, top=200px, left=300px, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no‘);
winEx2.document.open(‘text/html‘, ‘replace‘);
winEx2.document
.write(unescape(event.srcElement.parentElement.children[0].value));
winEx2.document.close();
}
function saveFile() {
var win = window.open(‘‘, ‘‘, ‘top=10000,left=10000‘);
win.document.write(document.all.t1.innerText)
win.document.execCommand(‘SaveAs‘, ‘‘, ‘a.html‘)
win.close();
}
*/
</script>
</head>
<body >
<div align="center" class="UBBContent">
<!--textarea 中的html内的‘<‘,‘>‘需要转义‘<‘,‘>‘ -->
<textarea id="t1" name="textfield" class="textarea" rows="30" cols="100">
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>测试程序</title>
</head>
<body>
<script
src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script type="text/javascript">
//字数限制
window.onload = function() {
//（document）
document.getElementById(‘note‘).onkeyup = function() {
document.getElementById(‘text-count‘).innerHTML=this.value.length;
}
//（jquery）
$(‘#note2‘).keyup(function() {
// var val=$(‘#note2‘).val();
// var len=val.length;
var len=this.value.length
$(‘#text-count2‘).text(len);
})
}
</script>
<div>
<textarea cols="40" rows="5" id="note"
name="note" maxlength="100" value=""
onkeyup="this.value=this.value.substring(0, 100)"
placeholder="最多可输入100字"></textarea><span id="text-count" value="">0</span>/100
</div>
<div>
<textarea cols="40" rows="5" id="note2"
name="note2" maxlength="100" value=""
onkeyup="this.value=this.value.substring(0, 100)"
placeholder="最多可输入100字"></textarea><span id="text-count2" value="">0</span>/100
</div>
</body>
</html>
</textarea><br><br>
<input name="Button" class="btn" onclick="doRun(‘t1‘)" type="button" value="运行代码" />
<input name="Button" class="btn" onclick="t1.select(‘t1‘)" type="button" value="全选" />
<input name="Button" class="btn" onclick="t1.value=‘‘" type="button" value="清空" />
<input onclick="saveCode(‘t1‘);" class="btn" type="button" value="保存代码" /><br>
<span>[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</span><br>
<!--实现方式二
<input name="Button" class="btn" onclick="doRun()" type="button" value="运行代码" />
<input name="Button" class="btn" onclick="t1.select()" type="button" value="全选" />
<input name="Button" class="btn" onclick="t1.value=‘‘" type="button" value="清空" />
<input onclick="saveFile();" class="btn" type="button" value="保存代码" /> -->
</div>
</body>
</html>
具体效果 请看上篇！！！
时间： 2024-10-10 07:30:38