给我的博客增加“划线”功能

看了王建硕的Blog，也给自己的加一个。不过没有写发送和获取数据的代码，纯粹是客户端的。把代码贴出来给大家玩一玩。呵呵。

 在“管理/选项/配置/公告”里面贴进去就好了，然后Blog里被选中的文字就会变红和加上下划线。

 

<script language=Javascript >
function MarkIt(){
    var strSelect;
    var objSelect;
    objSelect=document.selection.createRange();
    strSelect=objSelect.text;
    objSelect.pasteHTML("<font style='FONT-WEIGHT: bold; COLOR: red;BORDER-BOTTOM: red 2px dotted'>" + strSelect + "</font>");
    window.status="Selected:" + strSelect;
}
document.body.onmouseup=MarkIt;
</script>

 



再用XMLHTTPRequest把获取的被选中文字与服务器端交互，就可以做很多应用了。

posted @ 2005-09-19 00:03 坐看云起 阅读(711) 评论(9)  编辑 收藏 所属分类: 思考的问题 、JavaScript

  回复  引用  查看    
#1楼 2005-09-25 23:05 | 怀沙      
这个BUG还比较多，一划格式会乱，特别是代码。。
  回复  引用  查看    
#2楼 [楼主]2005-09-26 01:00 | 坐看云起      
嗯，是这样，把样式的<font>改成<span>会好些。
其实我最终的目的是做一个划词查单词的功能。
  回复  引用  查看    
#3楼 [楼主]2005-09-26 09:10 | 坐看云起      
增加一点判断，防止回复出错。

<script language=Javascript >
function MarkIt(){
//判断引发事件的tag,如果是输入框就返回，注意"TEXTAREA"和"INPUT"要大写
if(event.srcElement.tagName=="TEXTAREA" || event.srcElement.tagName=="INPUT" || document.selection.type =="None")
return;
var strSelect;
var objSelect;
objSelect=document.selection.createRange();
strSelect=objSelect.text;
objSelect.pasteHTML("<font style='FONT-WEIGHT: bold; COLOR: red;BORDER-BOTTOM: red 2px dotted'>" + strSelect + "</font>");
window.status="Selected:" + strSelect;
}
document.body.onmouseup=MarkIt;
</script>

很奇怪原本小写的代码怎么发上去就大写了。晕。只好您自个改回头了。不好意思。
  回复  引用  查看    
#4楼 [楼主]2005-09-26 09:31 | 坐看云起      
再改：

<script language=Javascript >
function MarkIt(){
if(event.srcElement.tagName=="TEXTAREA" || event.srcElement.tagName=="INPUT" || document.selection.type =="None")
return;
var strSelect;
var objSelect;
objSelect=document.selection.createRange();
strSelect=objSelect.text;
//objSelect.pasteHTML("<font style='FONT-WEIGHT: bold; COLOR: red;BORDER-BOTTOM: red 2px dotted'>" + strSelect + "</font>");
objSelect.execCommand("Underline",false);
objSelect.execCommand("ForeColor",false,"red");
window.status="Selected:" + strSelect;
}
document.body.onmouseup=MarkIt;
</script>

  回复  引用  查看    
#5楼 [楼主]2005-09-26 10:27 | 坐看云起      
现在应该比较完整了，还有什么问题，请大家指出来。
 
<script language=Javascript >
function MarkIt(){
    if(event.srcElement.tagName=="TEXTAREA" || event.srcElement.tagName=="INPUT" || document.selection.type =="None")
        return ;
    //如果不是左键，则返回
    if(event.button!=1)
        return;
    var strSelect;
    var objSelect;
    objSelect=document.selection.createRange();
    strSelect=objSelect.text;
    //objSelect.pasteHTML("<font style='FONT-WEIGHT: bold; COLOR: red;BORDER-BOTTOM: red 2px dotted'>" + strSelect + "</font>");
    objSelect.execCommand("Underline",false);
    objSelect.execCommand("ForeColor",false,"red");
    objSelect.select();
    window.status="Selected:" + strSelect;
}
document.body.onmouseup=MarkIt;
</script>

  回复  引用  查看    
#6楼 [楼主]2005-09-30 08:37 | 坐看云起      
今天又加了个功能，就是双击插入一个笑脸。呵呵。
  回复  引用    
#7楼 2006-04-30 16:31 | dljdlj70000 [未注册用户]
上楼兄弟如何就是双击插入一个笑脸？求你教教偶
如不能公开，请发email：dljdlj70000@21cn.com
  回复  引用  查看    
#8楼 [楼主]2006-05-04 21:46 | 坐看云起      
@dljdlj70000

您仔细看看我的文章，自然就会了啊。:-)
  回复  引用    
#9楼 2006-05-05 22:42 | dljdlj70000 [未注册用户]
@坐看云起
坐看云起,你好，我不是专业电脑水平，能否告知怎样双击插入一个笑脸？我插入一个笑脸时笑脸就覆盖了所选择的文字，怎样才能使笑脸不会覆盖了所选择的文字？请你帮我一下，能否把代码发email：dljdlj70000@21cn.com
或QQ偶：我qq： 574228968
能否把您qq告我，能否加偶好友
谢谢

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

闪存

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2005-09-23 10:44 编辑过


相关链接:

最新IT新闻:
51.COM技术副总裁邵辉跳槽百度
Mono 2.0终于到来
百度任命李一男担任首席技术官
Google Knol 开始尝试有声版
12日电脑与人进行世纪对话 可思考机器或诞生