文章·资料  电脑软件  手机应用  网站源码




    本 站 搜 索
    推 荐 文 章        More...
华硕易电脑(ASUS Eee PC 1025C..
先来段开场白:为了外出携带方便,到淘..
Acronis True Image 使用说明
  一款可以在Windows下使用全部功..
Norton Ghost 使用详解
一、分区备份   使用Ghost进行系..
    文 章 阅 读 排 行
传统 ASP 网站,Access 2003 数..
使用微软提供的数据库迁移软件 Micros..
手机视频监控 APP 关闭广告:萤..
一、萤石云视频:我的,设置,隐私设置,..
常见国产数据库(达梦数据库、Ki..
一、传统关系型(信创/政务/金融主力) ..
世界各国所使用的国际域名的缩..
域名缩写 国家/地区 英..
Windows 系统修改默认文件类型..
Windows 系统文件类型图标,通常由默..
Windows2000\XP 服务列表及说明
对于我们经常使用的windows 2000/xp..
查看一个顶级域名下所有的二级..
nslookup[这是命令的第一步。"nslooku..
新浪云终止服务
向日葵远程控制软件,设置隐藏..
向日葵远程控制软件有个人版和企业版..
腾讯QQ 20周年,QQ个人轨迹,查看..
很多八〇后,九〇后,使用QQ的时间比较..
  文 章 信 息
解决 HTML 编辑器的回车换行问题
〖评论(0)〗〖留言〗〖收藏〗
〖文章分类:电脑·手机·网络 / 网站设计·开发·优化〗〖阅读选项〗
    在 HTML 编辑器中,一般默认按回车总是出现<p></p>,当然按 Shift+Enter 可以是直接加<br>,而很多人希望按回车就是<br>换行而不是分段。 

    一直有人问我这个问题,而我没有写代码测试就认为在 onkeydown 里面判断 event.keyCode==13 就可以判断并解决,而后来发现似乎并没有人能用这种方法解决成功。对此表示歉意!为此,仔细研究了一下,发现可以有两种解决方法,但是都不是很完美,不过已经基本可以满足需要了: 

    1、在初始化编辑器内容的时候,加上“<div></div>”这样回车的时候编辑器会直接生成“<div></div>”而不会生成<p></p>,就可以只是换行而不换段了,如下所示: 

<SCRIPT LANGUAGE="javascript"> 
<!-- 
function initeditor(){ 
var L_DEFAULTHTML_TEXT="<DIV></DIV>"; 
var sz="" sz+="<BODY ONCONTEXTMENU=\"return false\">"+L_DEFAULTHTML_TEXT+"</BODY>" idEditbox.document.designMode="on" 
idEditbox.document.write(sz) 
idEditbox.document.attachEvent( "onkeyup"  , readsource ); 
idEditbox.document.attachEvent( "onkeydown"  , readsource ); 
} 
function readsource(){ document.all.source.value=idEditbox.document.body.innerHTML;} 
//--> 
</SCRIPT> 
<BODY onload="initeditor()"> 
<iframe width="500" height="400" id="idEditbox"></iframe><BR> 
<INPUT TYPE="button" value="查看源代码" onclick="readsource()"><BR> 
<TEXTAREA NAME="source" ROWS="20" COLS="60"></TEXTAREA> 
</BODY> 

    缺点:这种方法有个bug就是在编辑器中添加一些内容后,全选(Ctrl+A)然后删除所有内容(这样就把<div></div>也删除了),重新输入内容后回车就还是会产生<p></p> 

    2、直接在 onkeypress 里面处理 

    我们可以在onkeypress里面直接出来,但判断 event.keyCode==13 也就是是回车的时候我们直接插入<br>标签,这样无论怎么样都不会出现问题的了。以下是代码示例: 

<SCRIPT LANGUAGE="javascript"> 
<!-- 
function initeditor() 
{ 
var sz="" sz+="<BODY ONCONTEXTMENU=\"return false\"></BODY>" idEditbox.document.designMode="on" idEditbox.document.write(sz) idEditbox.document.onkeypress=fnKeypress}function fnKeypress(){  
//注意:如果焦点不在编辑器内该函数就不起作用了;  
var ev = idEditbox.event; if(ev.keyCode==13){  insertHTML("<br><!--  -->"); 
 //不知道是我浏览器问题还是其他问题,只插入<br>标签光标不换行,必须附加点其他标签,可以最后一起删除之   
return false; 
//这样回车就是等于失效了,不会加上讨厌的<p>标签 }} 
//在光标位置插入htmlfunction insertHTML(html){var sel = idEditbox.document.selection;if (sel!=null) {    var rng = sel.createRange(); 
    if (rng!=null)        rng.pasteHTML(html);}} 
//查看代码function readsource(){ document.all.source.value=idEditbox.document.body.innerHTML;} 
//--> 
</SCRIPT> 
<BODY onload="initeditor()"><iframe width="500" height="400" id="idEditbox"></iframe><BR> 
<INPUT TYPE="button" value="查看源代码" onclick="readsource()" onfocus="idEditbox.focus()"><BR> 
<TEXTAREA NAME="source" ROWS="20" COLS="60"></TEXTAREA> 
</BODY> 

    缺点:1、insertHTML("<br><!--  -->"); 会产生垃圾代码“<!--  -->”;     
          2、要保证焦点必须在编辑器中才能响应编辑器的onkeypress事件,因时间关系,本示例程序并未给出焦点不在编辑器中的处理方法。 

文章作者:未知  更新日期:2006-05-27
〖文章浏览:今天:0,本周:0,本月:0,总计:0〗〖发送文章〗〖打印文章〗