JS实现划词标记+划词搜索功能

来源：天极开发作者：佚名出处：综艺读书 2007-04-11

关键词：os javascript ie html google

·中搜划词搜索删除全攻略
·一波三折——遭遇“划词搜索”之后
·尊重用户体验中搜“自宫”划词搜索
·划词搜索: 在EmEditor中自己打造
·中搜停掉划词搜索:将以用户体验为中心
·划词搜索“网络猪”：倾听孩子的心声
·划词搜索：呼唤网络搜索的“平民化”

采用JAVASCRIPT方法为鼠标划选的文字加上着重样式，同时还有搜索功能。完整示例代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 

<head> 

<title>Untitled Document</title> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

</head> 

<body> 
<SCRIPT language=javascript> 

<!-- 

document.body.onload=adddiv; 

document.onmousedown=recordobj; 

document.ondblclick=dbclick; 

document.onmouseup=showselect; 

var starobj,isdb=false,allow=true; 

function isallow() 

{ 

if(allow){ 

allow=false; 

alert('is closed'); 

} 

else{ 

allow=true; 

alert('is opend'); 

} 

} 

function dbclick() 

{ 

isdb=true; 

} 

function recordobj() 

{ 

starobj=event.srcElement; 

} 

function showselect() { 

var str=""; 

if(event.srcElement.tagName!="A"&&event.srcElement.tagName!=
"INPUT"&&event.srcElement==starobj&&!isdb&&allow) 

{ 

var oText=document.selection.createRange(); 

if(oText.text.length>0) 

{ 

str=oText.text; 

oText.text="BuB"+oText.text+"EuE"; 

} 
oText.select(); 

event.srcElement.innerHTML=event.srcElement.innerHTML.replace("BuB",
"<u style='FONT-WEIGHT: bold;COLOR: #ff3366'>").replace("EuE","</u>"); 

} 

searchgoogle(str) 

isdb=false; 

} 

function searchgoogle(str) 

{ 

var obj=document.getElementById("searchgoogle"); 

if(str.length>0) 

{ 

obj.style.display="block"; 

obj.style.position="absolute"; 

obj.style.zindex=999; 

obj.style.posTop=document.body.scrollTop+event.y-25; 

obj.style.posLeft=document.body.scrollLeft+event.x+5; 

obj.style.widht=80; 

obj.innerHTML="<a target=_blank 
href=http://www.google.com/search?ie=UTF-8&oe=UTF-8&q="+str+" 
style='BORDER-RIGHT: royalblue thin solid; BORDER-TOP: royalblue thin solid; 
FONT-WEIGHT: bold; BORDER-LEFT: royalblue thin solid; CLIP: rect(auto auto auto auto); 
COLOR: #ffffff; BORDER-BOTTOM: royalblue thin solid; BACKGROUND-COLOR: inactivecaption; 
TEXT-DECORATION: none'>Search It！</a>"; 

} 

else 

{ 

obj.style.display="none"; 

} 

} 

function adddiv() 

{ 

var mobj = document.createElement("div"); 

mobj.id="searchgoogle"; 

document.body.appendChild(mobj); 

} 

//--> 

</SCRIPT> 

<INPUT type="button" onclick="isallow()" value="关闭/打开划词功能"> 

<p>qrasfdasfasfdasfsafasdfsafsafasdfasdfasd</p> 

</body> 

</html>

在页面中加上这串代码就行了，同时还有搜索功能。

进入讨论组讨论。

【深度阅读】相关文章

【收藏此文】【大中小】【打印】【关闭】

较早的文章：现代 javascript 编程

较新的文章：JavaScript 的事件冒泡 demo

站内各频道最新更新文档

形形色色的台湾特产

怀念“黛玉”妹妹

·如何设置路由器
·照片合成处理软件
·RedHat6.2服务配置之Apache
·提升电脑性能的方法
·电脑无法正常启动的问题
·delphi两种方法使用xml文档
·证券行业交易平台解决方案
·三星人寿保险Sybase案例

·东软商业保险系统解决方案
·CSO向Sun平台应用移植解决..
·东软税务全面整体解决方案
·珠海国地税KILL安全系统案例
·友讯：D-Link助昆明市公安..
·江苏邮政票据打印机系统方案
·浪潮：云南国税备份系统案例
·CSS 标签属性

站内最新制作专题

·ACDSEE专题教程-下载使用
·迅雷专题教程-下载使用
·Windows XP频道
·Windows Vista频道
·Windows 2000频道
·win2003频道
·Freebsd频道
·Oracle频道

·Linux频道
·Windows频道
·邮件服务器专题
·协议大全
·数据恢复指南教程
·FreeBSD使用教程
·Linux数据库宝典
·Linux基础知识

热门关键字导读

Photoshop教程：照片处理照片制作 PS快捷键抠图
计算机故障：XP系统修复
艺术与设计：设计流媒体设计欣赏边框
计算机安全：ARP

站内频道文章精选

新闻资讯	电脑技巧
· 秘密:Vista隐蔽的动态屏保 · 腾讯开发新电子宠物--QQ熊 · 惠普否认2999元PC有价无货	· 驱逐Win系统“流氓”文件 · WinXP中获取未使用的IP地址 · 尝试format C:格式化硬盘？
操作系统	常用软件
· 在DOS下恢复回收站中的文件 · 拯救WinXP崩溃的救命稻草 · Linux系统中超级权限的应用	· 搜狗PK谷歌：谁能代言拼... · 昨日重现，一键GHOST轻松.. · 实现Web迅雷在空闲时杀毒
桌面开发	网络编程
· AVIFile函数制做AVI文件 · VC中链接动态链接库的方法 · 熊猫烧香核心源码(Delphi)	· DateDiff函数祥解 · JavaScript去除空格的三种 · js效果图片加载进度实时..
数据库	图像处理
· SQL Server数据库优化方案 · Oracle的初学者入门心得 · JSP连接Mysql数据库	· Photoshop为美女做艺术处理 · 用Freehand创建发光字特效 · 设计自己的个性QQ动态表情

百度推荐，商机无限

搜索您感兴趣的内容