[会员中心]  [发布文章][发布软件]  [中文繁體] 
 文章·资料  电脑软件  手机软件  网站源码
   本 站 搜 索
[选项]
   推 荐 文 章       More...
华硕易电脑(ASUS Eee PC 1025C)驱动程序(Windows XP)安装参考(图) 华硕易电脑(ASUS Eee PC 1025C..
先来段开场白:为了外出携带方便..
Acronis True Image 使用说明 Acronis True Image 使用说明
  一款可以在Windows下使用..
Norton Ghost 使用详解 Norton Ghost 使用详解
一、分区备份   使用Ghost..
   阅 读 排 行
Windows 系统安装或备份时 ISO,GHO,WIM,ESD,PMF 都是什么文件类型 Windows 系统安装或备份时 ISO,GH..
【ISO 文件】 ISO 文件其实就..
使用“自动点击器”APP 在抖音直播间自动点赞 使用“自动点击器”APP 在抖音直..
看过抖音直播的朋友都知道,进入..
OPPO 手机的锁屏时间设置成横向显示 OPPO 手机的锁屏时间设置成横向..
第一次使用 OPPO 手机,桌面和锁..
电脑机箱(主板)前面板 USB 数据线的接线参考(图) 电脑机箱(主板)前面板 USB 数据..
  一、概述   因为每个 US..
抖音直播录屏的草稿保存位置 抖音直播录屏的草稿保存位置
抖音直播录屏,保存为“草稿”后,..
微信收到 flv 格式视频,如何播放? 微信收到 flv 格式视频,如何播放?
  微信上收到一个 flv 格式视频..
TrustAsia/DigiCert/Let s Encrypt 的免费 SSL 证书,多款网页浏览器都无法正常打开 TrustAsia/DigiCert/Let s Encryp..
云服务器安装了 Windows Server 2..
三星打印机(SCX-4521)提示“墨粉不足”设置 三星打印机(SCX-4521)提示“墨粉..
  三星打印机(SCX-4521)在添加..
文 章 信 息
解决 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)],相关法律法规如有修订,请浏览[中国政府网]网站。
·本站转载的文章,不为其有效性,实效性,安全性,可用性等做保证。
·如果有什么问题,或者意见建议,请联系[网站管理员]
  原“浪人文章”和“浪人下载”网站已合并为“老若尔文章软件站”,域名:https://lre.cn
  本站使用【啊估文章软件站】网站系统    网站管理员留言簿〗〖捐助     闽ICP备08009617号