[会员中心]    [设为主页][加入收藏夹]  [发布文章][发布软件]  [中文繁體] 
文章
资料
电脑
软件
手机
软件
网站
源码
    本 站 搜 索
[选项]
    推 荐 文 章       More...
华硕易电脑(ASUS Eee PC 1025C)驱动程序(Windows XP)安装参考(图) 华硕易电脑(ASUS Eee PC 1025C..
  先来段开场白:为了外出携..
Acronis True Image 使用说明 Acronis True Image 使用说明
  一款可以在Windows下使用..
Windows 2000/XP/2003 系统封装参考及工具 Windows 2000/XP/2003 系统封..
  一直以来,安装操作系统和..
Norton Ghost 使用详解 Norton Ghost 使用详解
一、分区备份   使用Ghost..
    阅 读 排 行
电脑机箱(主板)前面板 USB 数据线的接线参考(图) 电脑机箱(主板)前面板 USB 数据..
  一、概述   因为每个 US..
中国电信的家庭宽带设置“端口映射”及获取公网IP地址 中国电信的家庭宽带设置“端口映..
  现在有些家庭/店铺安装了视..
夏普(SHARP) AR-1808S 以 A4 尺寸纸张扫描 夏普(SHARP) AR-1808S 以 A4 尺..
  新装的夏普(SHARP) AR-1808S..
网站(域名)价值评估参考(附:21个在线域名/网站价值评估系统) 网站(域名)价值评估参考(附:21个..
  如果你拥有一家网站,那么你..
打造属于自己的字体(图) 打造属于自己的字体(图)
  不少做平面的朋友可能都有过..
腾讯QQ宠物2018年9月15日关停 腾讯QQ宠物2018年9月15日关停
2005年2月16日,腾讯QQ同时在线人..
域名价值评估参考 域名价值评估参考
  域名的价值是一个很抽象的概..
Intel GMA 3600 V1.15 for Windows XP 驱动程序配置过程图解 Intel GMA 3600 V1.15 for Window..
Intel GMA 3600 V1.15 for Window..
  文 章 信 息
    解决 HTML 编辑器的回车换行问题
[评论()][留言][收藏]
[文章分类:电脑系统·网络 / 网站设计·开发·优化[阅读选项]
    在 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
[文章浏览:][打印文章][发送文章
阅读说明
·本站大部分文章转载于网络,如有侵权请留言告知,本站即做删除处理。
·本站法律法规类文章转载自[中国政府网(www.org.cn)],相关法律法规如有修订,请浏览[中国政府网]网站。
·本站转载的文章,不为其有效性,实效性,安全性,可用性等做保证。
·如果有什么问题,或者意见建议,请联系[网站管理员]
  原“浪人文章”和“浪人下载”网站已合并为“老若尔文章软件站”,域名:http://www.lre.cn
  本站使用【啊估文章软件站】网站系统    [联系网站管理员]         闽ICP备08009617号