教学演示-UBB,剪贴板,textRange及其他- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 教学演示-UBB,剪贴板,textRange及其他

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

Javascript 中的教学演示-UBB,剪贴板,textRange及其他

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 299 ::

收藏到网摘: n/a

拖动层多线程的全选复选框

这是一个给新手学习代码的帖子，包含以下内容：
如何使用UBB代码，如何用js与剪贴板交互，如何使用textRange对象，如何使用自定义的快捷键操作，如何自动随窗口大小调整页面内容尺寸，正则表达式的使用等等
请仔细阅读代码，有问题请提问，目前代码开发完成度80％，IE only

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "standards-compliant mode" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>Blue Idea UBB Code Edit</title>
<style>
* { margin:0px; padding:0px;
}
html, body { background-color:buttonface; width:100%; height:100%; overflow:hidden; border-width:0px; font-size:13px; font-family:Verdana Arial 宋体; color:#333333; cursor:default;
}
input {border-width:1px;}
#divMain { overflow:hidden;
}
#divTools { width:100%; height:20px; line-height:20px; overflow:hidden; border-bottom:1px solid buttonshadow; margin:0px; padding:0px; padding-left:10px; background-color:buttonface; color:black;
}
#divTools label { font-weight:bold;float:left;padding-left:15px;padding-right:15px;}
#divTools a { display:block; float:left; height:20px; padding-left:15px; padding-right:15px; line-height:20px; text-align:center; overflow:hidden; color:black; text-decoration:none;
}
#divTools a:hover {background-color:gold;color:black;}
#divTools a:active {background-color:navy;color:white;}
#divContent, #txtContent { border:1px inset buttonface; width:94%; height:400px; overflow:auto; padding:5px; margin:2px 15px 0px 15px; background-color:white; color:black; display:none;
}
#txtContent { font-size:14px; border-width:1px; display:block;
}
.UBB_code { border:1px solid #555; padding:10px; margin:10px; width:500px; background-color:#DDD; font-size:13px; font-weight:normal; color:black;
}
.UBB_html { padding:4px; width:350px; height:200px; font-size:13px; font-weight:normal; color:black;
}
.UBB_html_button { width:100px; height:22px; line-height:18px; border-width:2px; margin:0px;
}
</style>
<script type="text/javascript">
var txtContent, divContent, viewButton01, viewButton02, dtf;
var strHTMLStart="<div><textarea class=\"UBB_html\">";
var strHTMLEnd="<\/textarea><input type=\"button\" value=\"运行代码\" onclick=\"UBB_runCode(this);\" class=\"UBB_html_button\" \/><\/div>";
var strCodeStart="<div class=\"UBB_code\">";
var strCodeEnd="<\/div>";
function init(){ txtContent=document.getElementById("txtContent"); divContent=document.getElementById("divContent"); viewButton01=document.getElementById("viewButton01"); viewButton02=document.getElementById("viewButton02"); dtfFrame=document.createElement("iframe"); dtfFrame.frameBorder="0px"; dtfFrame.style.width="0px"; dtfFrame.style.height="0px"; document.body.appendChild(dtfFrame); dtf=window.frames[window.frames.length-1]; dtf.location.href="about:blank"; window.onresize=switchModel; txtContent.onkeydown=chkKey; switchModel(0);
}
function switchModel(id){ // 重新计算输入区域大小 txtContent.style.width=document.body.clientWidth-50+"px"; txtContent.style.height=document.body.clientHeight-50+"px"; divContent.style.width=document.body.clientWidth-50+"px"; divContent.style.height=document.body.clientHeight-50+"px"; if(id==0){ // 转到代码视图 divContent.style.display="none"; txtContent.style.display="block"; viewButton01.style.backgroundColor="navy"; viewButton01.style.color="white"; viewButton02.style.backgroundColor=""; viewButton02.style.color=""; txtContent.focus(); }else if(id==1){ // 转到预览视图 divContent.style.display="block"; txtContent.style.display="none"; divContent.innerHTML=UBB2HTML(txtContent.value); viewButton02.style.backgroundColor="navy"; viewButton02.style.color="white"; viewButton01.style.backgroundColor=""; viewButton01.style.color=""; divContent.focus(); }
}
function HTML2UBB(strHTML){ var re=htmlDecode(strHTML); re=re.replace(/<(\/?)strong>/ig,"[$1b]"); re=re.replace(/<(\/?)b>/ig,"[$1b]"); re=re.replace(/<(\/?)em>/ig,"[$1i]"); re=re.replace(/<(\/?)i>/ig,"[$1i]"); re=re.replace(/< *(\/?) *div[\w\W]*?>/ig,"\r\n"); re=re.replace(/< *img +[\w\W]*?src=["]?([^">\r\n]+)[\w\W]*?>/ig,"[img]$1[/img]"); re=re.replace(/< *a +[\w\W]*?href=["]?([^">\r\n]+)[\w\W]*?>([\w\W]*?)< *\/ *a *>/ig,"[url=$1]$2[/url]"); re=re.replace(/<script[\w\W]+?<\/script>/ig,""); re=re.replace(/<[\w\W]*?>/ig,""); re=re.replace(/(\r\n){2,}/g,"\r\n"); return(re);
}
function UBB2HTML(strUBB){ var re=strUBB; // 转换HTML实体 re=htmlEncode(re); // 屏蔽 html 和 code 中的 UBB 转意符 re=re.replace(/(\[html\])([\w\W]*?)(\[\/html\])/ig,UBB2HTML_escapeUBB); re=re.replace(/(\[code\])([\w\W]*?)(\[\/code\])/ig,UBB2HTML_escapeUBB); // 转换UBB代码为HTML代码 re=re.replace(/\[b\]/ig,"<b>").replace(/\[\/b\]/ig,"<\/b>"); re=re.replace(/\[i\]/ig,"<i>").replace(/\[\/i\]/ig,"<\/i>"); re=re.replace(/\[code\]/ig,strCodeStart).replace(/\[\/code\]/ig,strCodeEnd); re=re.replace(/\[html\]/ig,strHTMLStart).replace(/\[\/html\]/ig,strHTMLEnd); re=re.replace(/\[size=(\d)\]/ig,UBB2HTML_fontSize).replace(/\[\/size\]/ig,"<\/span>"); re=re.replace(/\[img\]/ig,"<img src=\"").replace(/\[\/img\]/ig,"\" \/>"); re=re.replace(/\[url\]([\w\W]+?)\[\/url\]/ig,"<a href=\"$1\">$1<\/a>"); re=re.replace(/\[url=([^\]]+?)\]/ig,UBB2HTML_url).replace(/\[\/url\]/ig,"<\/a>"); // 还原 html 和 code 中的 UBB 转意符 re=re.replace(/\\\[/g,"[").replace(/\\\]/g,"]"); return(re);
}
function UBB2HTML_escapeUBB(strAll,strS1,strS2,strS3){ switch(strS1.toLowerCase()){ case "[html]": return(strS1+htmlDecode(strS2.replace(/\[/g,"\\[").replace(/\]/g,"\\]"))+strS3); break; case "[code]": return(strS1+strS2.replace(/\[/g,"\\[").replace(/\]/g,"\\]")+strS3); break; }
}
function htmlEncode(strS){ return(strS.replace(/&/g,"&").replace(/</g," ").replace(/>/g,">").replace(/ /g," ").replace(/\r\n/g,"<br\/>"));
}
function htmlDecode(strS){ return(strS.replace(/<br\/?>/ig,"\r\n").replace(/ /ig," ").replace(/>/ig,">").replace(/</ig,"<").replace(/ /ig,"&"));
}
function UBB_runCode(obj){ theObj=obj; while(theObj=theObj.previousSibling)if(String(theObj.tagName).toLowerCase()=="textarea"){ newWin=open(); newWin.document.open(); newWin.document.clear(); newWin.document.write(theObj.value); newWin.document.close(); return(true); }
}
function UBB2HTML_fontSize(str,i){ return("<span style=\"font-size:"+(7+i*4)+"px;\">");
}
function UBB2HTML_url(str,strURL){ return("<a href=\""+strURL+"\"\/>");
}
function chkKey(){ var eK=keyChar().toLowerCase(); switch(eK){ case "tab": setUBB(eK);return(false); break; case "b": case "+": case "-": if(event.ctrlKey){ setUBB(eK);return(false); } break; case "c": case "h": case "i": if(event.ctrlKey&&event.shiftKey){ setUBB(eK);return(false); } break; case "v": if(event.ctrlKey&&event.shiftKey){ chkPaste();return(false); }else if(event.ctrlKey&&event.altKey){ chkPasteH();return(false); } break; }
}
function chkPaste(){ txtContent.focus(); tR=document.selection.createRange(); dtf.document.body.innerHTML=""; dtf.document.body.contentEditable=true; dtf.document.body.focus(); dtf.document.execCommand("paste"); tR.text=HTML2UBB(dtf.document.body.innerHTML); tR.select();
}
function chkPasteH(){ txtContent.focus(); tR=document.selection.createRange(); dtf.document.body.innerHTML=""; dtf.document.body.contentEditable=true; dtf.document.body.focus(); dtf.document.execCommand("paste"); tR.text=(dtf.document.body.innerHTML); tR.select();
}
function setUBB(type){ var tR, strT, intSize; var typeCodes=new Array(); switchModel(0); txtContent.focus(); tR=document.selection.createRange(); strT=tR.text; switch(type){ case "tab": tR.text="\t";tR.collapse();tR.select(); break; case "b": if(strT.match(/^\[b\][\w\W]*?\[\/b\]$/i)){ tR.text=strT.substring(3,strT.length-4); tR.moveStart("character",-len(strT)+7); tR.select(); }else{ tR.text="[b]"+strT+"[/b]"; if(strT==""){ tR.moveStart("character",-4);tR.collapse(); }else{ tR.moveStart("character",-len(strT)-7); } tR.select(); } break; case "i": if(strT.match(/^\[i\][\w\W]*?\[\/i\]$/i)){ tR.text=strT.substring(3,strT.length-4); tR.moveStart("character",-len(strT)+7); tR.select(); }else{ tR.text="[i]"+strT+"[/i]"; if(strT==""){ tR.moveStart("character",-4);tR.collapse(); }else{ tR.moveStart("character",-len(strT)-7); } tR.select(); } break; case "c": if(strT.match(/^\[code\][\w\W]*?\[\/code\]$/i)){ tR.text=strT.substring(6,strT.length-7); tR.moveStart("character",-len(strT)+13); tR.select(); }else{ tR.text="[code]"+strT+"[\/code]"; if(strT==""){ tR.moveStart("character",-7);tR.collapse(); }else{ tR.moveStart("character",-len(strT)-13); } tR.select(); } break; case "h": if(strT.match(/^\[html\][\w\W]*?\[\/html\]$/i)){ tR.text=strT.substring(6,strT.length-7); tR.moveStart("character",-len(strT)+13); tR.select(); }else{ tR.text="[html]"+strT+"[\/html]"; if(strT==""){ tR.moveStart("character",-7);tR.collapse(); }else{ tR.moveStart("character",-len(strT)-13); } tR.select(); } break; case "+": if(strT.match(/^\[size=\d\][\w\W]*?\[\/size\]$/i)){ intSize=parseInt(strT.charAt(6))+1; if(intSize<10){ tR.text=strT.substring(0,6)+intSize+strT.substring(7); tR.moveStart("character",-len(strT)); }else{ tR.text=strT.substring(8,strT.length-7); tR.moveStart("character",-len(strT)+15); } tR.select(); }else{ tR.text="[size=1]"+strT+"[/size]"; if(strT==""){ tR.moveStart("character",-7);tR.collapse(); }else{ tR.moveStart("character",-len(strT)-15); } tR.select(); } break; case "-": if(strT.match(/^\[size=\d\][\w\W]*?\[\/size\]$/i)){ intSize=parseInt(strT.charAt(6))-1; if(intSize>0){ tR.text=strT.substring(0,6)+intSize+strT.substring(7); tR.moveStart("character",-len(strT)); }else{ tR.text=strT.substring(8,strT.length-7); tR.moveStart("character",-len(strT)+15); } tR.select(); }else{ tR.text="[size=9]"+strT+"[/size]"; if(strT==""){ tR.moveStart("character",-7);tR.collapse(); }else{ tR.moveStart("character",-len(strT)-15); } tR.select(); } break; }
}
function len(str){ return(str.replace(/\r\n/g,"\r").length);
}
function keyChar(){ if(event.shiftKey){ switch(event.keyCode.toString()){ case "96":return("0"); case "97":return("1"); case "98":return("2"); case "99":return("3"); case "100":return("4"); case "101":return("5"); case "102":return("6"); case "103":return("7"); case "104":return("8"); case "105":return("9"); case "111":return("/"); case "110":return("."); case "106":return("*"); case "109":return("-"); case "107":return("+"); case "144":return("numlock"); case "192":return("~"); case "49":return("!"); case "50":return("@"); case "51":return("#"); case "52":return("$"); case "53":return("%"); case "54":return("^"); case "55":return("&"); case "56":return("*"); case "57":return("("); case "48":return(")"); case "189":return("_"); case "187":return("+"); case "219":return("{"); case "221":return("}"); case "220":return("|"); case "20":return("caplock"); case "186":return(":"); case "222":return("\""); case "188":return("<"); case "190":return(">"); case "191":return("?"); case "8":return("backspace"); case "9":return("tab"); case "81":return("Q"); case "87":return("W"); case "69":return("E"); case "82":return("R"); case "84":return("T"); case "89":return("Y"); case "85":return("U"); case "73":return("I"); case "79":return("O"); case "80":return("P"); case "65":return("A"); case "83":return("S"); case "68":return("D"); case "70":return("F"); case "71":return("G"); case "72":return("H"); case "74":return("J"); case "75":return("K"); case "76":return("L"); case "16":return("shift"); case "90":return("Z"); case "88":return("X"); case "67":return("C"); case "86":return("V"); case "66":return("B"); case "78":return("N"); case "77":return("M"); case "17":return("ctrl"); case "91":return("win"); case "92":return("win"); case "18":return("alt"); case "32":return(" "); case "93":return("menu"); case "38":return("up"); case "40":return("down"); case "37":return("left"); case "39":return("right"); case "45":return("insert"); case "46":return("delete"); case "36":return("home"); case "35":return("end"); case "33":return("pageup"); case "34":return("pagedown"); case "34":return("printcreen"); case "145":return("scrolllock"); case "19":return("pause"); case "27":return("esc"); case "12":return("middle"); case "13":return("\r\n"); case "112":return("f1"); case "113":return("f2"); case "114":return("f3"); case "115":return("f4"); case "116":return("f5"); case "117":return("f6"); case "118":return("f7"); case "119":return("f8"); case "120":return("f9"); case "121":return("f10"); case "122":return("f11"); case "123":return("f12"); default:return("unknown"); } }else{ switch(event.keyCode.toString()){ case "96":return("0"); case "97":return("1"); case "98":return("2"); case "99":return("3"); case "100":return("4"); case "101":return("5"); case "102":return("6"); case "103":return("7"); case "104":return("8"); case "105":return("9"); case "111":return("/"); case "110":return("."); case "106":return("*"); case "109":return("-"); case "107":return("+"); case "144":return("numlock"); case "192":return("`"); case "49":return("1"); case "50":return("2"); case "51":return("3"); case "52":return("4"); case "53":return("5"); case "54":return("6"); case "55":return("7"); case "56":return("8"); case "57":return("9"); case "48":return("0"); case "189":return("-"); case "187":return("="); case "8":return("backspace"); case "9":return("tab"); case "81":return("q"); case "87":return("w"); case "69":return("e"); case "82":return("r"); case "84":return("t"); case "89":return("y"); case "85":return("u"); case "73":return("i"); case "79":return("o"); case "80":return("p"); case "219":return("["); case "221":return("]"); case "220":return("\\"); case "20":return("caplock"); case "65":return("a"); case "83":return("s"); case "68":return("d"); case "70":return("f"); case "71":return("g"); case "72":return("h"); case "74":return("j"); case "75":return("k"); case "76":return("l"); case "186":return(";"); case "222":return("'"); case "16":return("shift"); case "90":return("z"); case "88":return("x"); case "67":return("c"); case "86":return("v"); case "66":return("b"); case "78":return("n"); case "77":return("m"); case "188":return(","); case "190":return("."); case "191":return("/"); case "17":return("ctrl"); case "91":return("win"); case "92":return("win"); case "18":return("alt"); case "32":return(" "); case "93":return("menu"); case "38":return("up"); case "40":return("down"); case "37":return("left"); case "39":return("right"); case "45":return("insert"); case "46":return("delete"); case "36":return("home"); case "35":return("end"); case "33":return("pageup"); case "34":return("pagedown"); case "34":return("printcreen"); case "145":return("scrolllock"); case "19":return("pause"); case "27":return("esc"); case "12":return("middle"); case "13":return("\r\n"); case "112":return("f1"); case "113":return("f2"); case "114":return("f3"); case "115":return("f4"); case "116":return("f5"); case "117":return("f6"); case "118":return("f7"); case "119":return("f8"); case "120":return("f9"); case "121":return("f10"); case "122":return("f11"); case "123":return("f12"); default:return("unknown"); } }
}
</script>
</head>
<body onload="init();">
<div id="divMain">
<div id="divTools">
<label>视图模式:</label>
<a href="javascript:void(switchModel(0));" id="viewButton01" >代码视图</a>
<a href="javascript:void(switchModel(1));" id="viewButton02" >预览视图</a>
<label> | 样式工具:</label>
<a href="javascript:void(setUBB('b'))" title="ctrl + b">黑体</a>
<a href="javascript:void(setUBB('i'))" title="ctrl + shift + i">斜体</a>
<a href="javascript:void(setUBB('c'))" title="ctrl + shift + c">代码</a>
<a href="javascript:void(setUBB('h'))" title="ctrl + shift + h">HTML 运行</a>
<a href="javascript:void(setUBB('+'))" title="ctrl + +">字体 + </a>
<a href="javascript:void(setUBB('-'))" title="ctrl + -">字体 - </a>
<a href="javascript:void(chkPaste())" title="ctrl + shift + v">粘贴UBB</a>
<a href="javascript:void(chkPasteH())" title="ctrl + alt + v">粘贴HTML</a>
</div>
<div id="divContent" contentEditable="false">
</div>
<textarea id="txtContent"></textarea>
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

拖动层多线程的全选复选框

Javascript 中的 教学演示-UBB,剪贴板,textRange及其他

评论 (0) All

Javascript 中的教学演示-UBB,剪贴板,textRange及其他