runxinzhi.com
首页
百度搜索
在线编辑器(4)TAB键缩进功能
利用IE的DHTML属性给编辑器增加了TAB键缩进功能.基本原理是:通过监听键盘的keydown事件,来取消浏览器默认事件,并在光标所在处增加"\t\t\t".来实现缩进上.
实现的JS代码如下:
window.onload=function(){
initDocument();
initFormat();
var editor=document.getElementById("editor_position").contentWindow;
//获取按键事件的方法1
if(document.all){//IE
editor.document.attachEvent("onkeydown",keyPress1);
}else{//other
editor.document.addEventListener("keydown",keyPress1,false)
}
//获取按键事件的方法2
/*editor.document.body.onkeypress=function(){
var editor=document.getElementById("editor_position").contentWindow;
return keyPress2(editor.event);
}*/
}
//对应于按键事件方法1
function keyPress1(event){
//当按下TAB键时,通过取消默认事件,并动态输入四个\t来实现TAB键缩进.
if(event.keyCode==9){
//取消默认事件
if(document.all){//IE
event.returnValue=false;
}else{//other(FF)
event.preventDefault();
}
var editor=document.getElementById("editor_position").contentWindow;
if(document.all){//IE
var rng=editor.document.selection.createRange();
rng.text="\t\t\t";
//rng.collapse(false);
//rng.select();
}else{//FF
var range=document.createRange();
range.text="ok";
var rng=editor.window.getSelection();
if(rng.rangeCount>0)rng.removeAllRanges();
rng.text="dovapour";
}
}
}
/*
IE中:keypress事件的keyCode能区分大小写,但不能识别功能键(Ctr,Shift,Alt等); keyup和keydown事件的keyCode不能区分大小写,能识别功能键.
FF中:keypress事件的keyCode=0; keyup和keydown事件的keyCode不能区分大小写,能识别功能键.
Chrome中:keypress事件的keyCode能区分大小写,但不能识别功能键(Ctr,Shift,Alt等); keyup和keydown事件的keyCode不能区分大小写,能识别功能键.
*/
完整可运行代码如下:你也可以修改代码后再运行.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>文本编辑器</title> <style type="text/css"> #td_btns td{ text-align: center; height:28px; 28px; } #td_btns img{ background-color:#ccc; border:1px solid #b0b0b0; cursor:pointer; } </style> <script type="text/javascript"> //初始化编辑器 function initDocument(){ var editor_bodyTag="<html><head></head><body bgcolor='#ffffff'></body></html>"; //获取iframe对象。 var editor=document.getElementById("editor_position").contentWindow; /*设置编辑器的设计模式。默认为”off“,表示文档不可编辑;设置成”on“即为可编辑的*/ editor.document.designMode="on"; editor.document.open(); editor.document.write(editor_bodyTag); editor.document.close(); //设置编辑器的编码方式。这里设置成中文 editor.document.charset="gb2312"; //这句代码对IE没用.主要是针对FF,修正FF的初始化光标位置偏上 editorFormat("justifyleft"); } //功能函数,执行命令 function editorFormat(what,opt){ var editor=document.getElementById("editor_position").contentWindow; if(opt==null){ try{ editor.document.execCommand(what,false,null); }catch(e){//错误处理 alert("Error-line:36"); } }else{ try{ editor.document.execCommand(what,"",opt); }catch(e){ alert("error-line:42"); } } editor.focus(); } //初始化按钮,当mouseover,mouseout时有效果 function initFormat(){ var editor=document.getElementById("editor_position").contentWindow; var aImgs=document.getElementById("td_btns").getElementsByTagName("img"); for(var i=0;i<aImgs.length;i++){ aImgs[i].onmouseover=function(){ this.style.padding="2px"; editor.focus(); } aImgs[i].onmouseout=function(){ this.style.padding="0px"; } if(i<4){//bold,italic,underline,throughline aImgs[i].value=false; aImgs[i].onclick=function(){ if(this.value){ this.value=false; this.style.backgroundColor="#ccc"; this.style.border="1px solid #b0b0b0"; }else{ this.value=true; this.style.backgroundColor="#ddd"; this.style.border="1px inset #b0b0b0"; } } }else if(i==4){//清除(bold,italic,underline,throughline)的格式 aImgs[i].onclick=function(){ for(var j=0;j<4;j++){ aImgs[j].value=false; aImgs[j].style.backgroundColor="#ccc"; aImgs[j].style.border="1px solid #b0b0b0"; } } }else if(i>4 &&i<8){ aImgs[i].onclick=function(){ for(var j=5;j<8;j++){ aImgs[j].style.backgroundColor="#ccc"; aImgs[j].style.border="1px solid #b0b0b0"; } this.style.backgroundColor="#ddd"; this.style.border="1px inset #b0b0b0"; } } } } window.onload=function(){ initDocument(); initFormat(); var editor=document.getElementById("editor_position").contentWindow; //获取按键事件的方法1 if(document.all){//IE editor.document.attachEvent("onkeydown",keyPress1); }else{//other editor.document.addEventListener("keydown",keyPress1,false) } //获取按键事件的方法2 /*editor.document.body.onkeypress=function(){ var editor=document.getElementById("editor_position").contentWindow; return keyPress2(editor.event); }*/ } //对应于按键事件方法1 function keyPress1(event){ //当按下TAB键时,通过取消默认事件,并动态输入四个\t来实现TAB键缩进. if(event.keyCode==9){ //取消默认事件 if(document.all){//IE event.returnValue=false; }else{//other(FF) event.preventDefault(); } var editor=document.getElementById("editor_position").contentWindow; if(document.all){//IE var rng=editor.document.selection.createRange(); rng.text="\t\t\t"; //rng.collapse(false); //rng.select(); }else{//FF var range=document.createRange(); range.text="ok"; var rng=editor.window.getSelection(); if(rng.rangeCount>0)rng.removeAllRanges(); rng.text="dovapour"; } } } /* IE中:keypress事件的keyCode能区分大小写,但不能识别功能键(Ctr,Shift,Alt等); keyup和keydown事件的keyCode不能区分大小写,能识别功能键. FF中:keypress事件的keyCode=0; keyup和keydown事件的keyCode不能区分大小写,能识别功能键. Chrome中:keypress事件的keyCode能区分大小写,但不能识别功能键(Ctr,Shift,Alt等); keyup和keydown事件的keyCode不能区分大小写,能识别功能键. */ //对应于按键事件方法2 function keyPress2(ev){ alert(ev.keyCode); } </script> </head> <body> <table style="background-color:#ccc;" cellpadding=0 cellspacing=5 border=0 > <tr> <td> <table id="td_btns"> <tr> <td id="bold_td" title="加粗" onclick="editorFormat('bold');"> <img src="testImages/bold.gif" width="16" height="16" /> </td> <td title="斜体" onclick="editorFormat('italic');"> <img src="testImages/italic.gif" width="16" height="16" /> </td> <td title="下划线" onclick="editorFormat('underline');"> <img src="testImages/underline.gif" width="16" height="16" /> </td> <td title="删除线" onclick="editorFormat('strikethrough');"> <img src="testImages/strikethrough.gif" width="16" height="16" /> </td> <td title="取消格式" onclick="editorFormat('removeformat');"> <img src="testImages/removeformat.gif" width="16" height="16" /> </td> <td title="左对齐" onclick="editorFormat('justifyleft');"> <img src="testImages/aleft.gif" width="16" height="16" /> </td> <td title="中间对齐" onclick="editorFormat('justifycenter');"> <img src="testImages/acenter.gif" width="16" height="16" /> </td> <td title="右对齐" onclick="editorFormat('justifyright');"> <img src="testImages/aright.gif" width="16" height="16" /> </td> </tr> </table> </td> </tr> <tr height="4"><td></td></tr> <tr height="400"> <td valign="top"><iframe ID="editor_position" marginheight="0" style="word-break:break-all; 640px; overflow:hidden;" marginwidth="0" hspace="0" width="640" height="400"></iframe> </td> </tr> </table> </body> </html>
运行代码
保存代码
复制代码
相关阅读:
[转]关闭 Chrome 浏览器的启动时提示 - 请停用以开发者模式运行的扩展程序
[Java][Web]ServletContext 方法的应用
SQL中char、varchar、nchar、nvarchar 详解
数据库三级模式与二级映像
数据库设计思考
Oracle概述
asp.net服务器控件button先执行js再执行后台的方法
C# 序列化
HTML服务器控件与Web服务器控件
VS2013自带报表+打印功能
原文地址:https://www.cnblogs.com/pricks/p/1664831.html
最新文章
《程序员代码面试指南》第三章 二叉树问题 分别用递归和非递归实现二叉树前序、中序、后序遍历
《程序员代码面试指南》第三章 二叉树问题
2018/7/31-zznu-oj-问题 F: 手机密码--【裸dfs+for循环即可!——据说三个小时内只有两个人读完了题意并轻松AC了】
2018/7/31 -zznu-oj -问题 C: 磨刀- 【扩展欧几里得算法的基本应用】
2018/7/31-zznu-oj-问题 B: N! 普拉斯 -【求大数的阶乘-ll存不下-然后取尾零的个数输出-暴力模拟】
2018/7/31-zznuoj-问题 A: A + B 普拉斯【二维字符串+暴力模拟+考虑瑕疵的题意-0的特例】
ZZNU-OJ-2118 -(台球桌面碰来碰去,求总距离)——模拟到爆炸【超时】的不能AC的代码
【二进制优化-多重背包】zznu-oj-2120 : 安详--如何用尽钱币打赏主播获得最大好感度
ZZNU-OJ-2119 : 告辞,【卡特兰数列,组合数学】
【ZZNU-oj-2116:人间不值得】(1亿以内的货币拼音转数值求折扣价原价)--hash+String大法好+字符串处理+超大暴力模拟题
热门文章
zznu-oj-2117 : 我已经在路上了(求函数的原函数的字符串)--【暴力模拟题,花式模拟题,String大法好】
2018年6月2日-徐州ICPC邀请赛日志-收获第一枚icpc奖牌
[Web]网址净化方法
[转]银行卡号位数
[Java][Web]利用 referer 防盗链
[Java][Web]Web 工程中的各类地址的写法
[Java][Web]Request 实现转发和 MVC 设计模式
[Java][Web]解决 Request 的乱码
[Java][Web]Request 获取请求头和数据
[转]注册表相关
Copyright © 2020-2023
润新知