textbox右键菜单- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > textbox右键菜单

技术文章搜索

关键字

Javascript 中的 textbox右键菜单

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 37 ::

收藏到网摘: n/a

Using the TextRange Object document.createRange实例

点击运行可以看到效果:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=gb2312">
<html>
<head>
<title>Page 1</title>
</head>
<STYLE type=text/css>A:link { TEXT-DECORATION: none
}
A:visited { TEXT-DECORATION: none
}
A:active { TEXT-DECORATION: none
}
A:hover { TEXT-DECORATION: underline overline
}
BODY { COLOR: #000000; FONT-SIZE: 9pt
}
TH { FONT-SIZE: 9pt
}
TD { FONT-SIZE: 9pt
}
DIV { FONT-SIZE: 9pt
}
</STYLE>
<STYLE type=text/css>BODY { scrollbar-face-color: #C0C0C0; 轴面颜色: #FFFFFF; 箭头颜色: #C0C0C0; 轴面左边角颜色: #000000; 左立体边颜色: #808080; 轴面右边角颜色: #FFFFFF; 右立体边颜色: #E0E0E0; 轴轨道颜色:
}
</STYLE>
<STYLE>.skin0 { BACKGROUND-COLOR: menu; BORDER-BOTTOM: black 2px solid; BORDER-LEFT: black 2px solid; BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; CURSOR: default; FONT-FAMILY: Verdana; LINE-HEIGHT: 20px; POSITION: absolute; TEXT-ALIGN: left; VISIBILITY: hidden; WIDTH: 200px
}
.skin1 { BACKGROUND-COLOR: menu; BORDER-BOTTOM: buttonhighlight 2px outset; BORDER-LEFT: buttonhighlight 2px outset; BORDER-RIGHT: buttonhighlight 2px outset; BORDER-TOP: buttonhighlight 2px outset; CURSOR: default; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 10pt; POSITION: absolute;z-index:9; TEXT-ALIGN: left; VISIBILITY: hidden; WIDTH: 120px
}
.menuitems { FONT-SIZE: 9pt; PADDING-LEFT: 15px; PADDING-RIGHT: 10px
}
</STYLE>
<SCRIPT language=JavaScript1.2>
var menuskin = "skin1"; // skin0, or skin1
var display_url = 0; // Show URLs in status bar?
var selInputOb = null;
function showmenuie5() {
selInputOb = event.srcElement;
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else
ie5menu.style.left = document.body.scrollLeft + event.clientX;
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "visible";
return false;
}
function hidemenuie5() {
ie5menu.style.visibility = "hidden";
}
function highlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white";
if (display_url)
window.status = event.srcElement.url; }
}
function lowlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black";
window.status = ""; }
}
function jumptoie5() {
if (event.srcElement.className == "menuitems") {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
else
window.location = event.srcElement.url; }
}
</SCRIPT>
<body bgcolor="#ffffff" onload="PageLoaded()" onunload="PageUnloaded()">
<DIV class=skin0 id=ie5menu onclick=jumptoie5(); onmouseout=lowlightie5() onmouseover=highlightie5()> <DIV class=menuitems url="javascript:history.back();">返回</DIV> <HR>
<div class=menuitems url="javascript:selInputOb.value='我需要的';void(0);">输入数据</div> <DIV class=menuitems url="javascript:history.go(1);">下一页</DIV>
</div>
<form onsubmit="OnWebFormSubmit()">
<input type="text" name="EditBox0" ID="EditBox0" tabindex="1" accesskey="" style=" "
>
<input type="text" name="EditBox1" ID="EditBox1" tabindex="1" accesskey="" style=" "
>
<SCRIPT language=JavaScript1.2>
if (document.all && window.print) {
ie5menu.className = menuskin;
document.forms[0].EditBox0.oncontextmenu = showmenuie5;
document.forms[0].EditBox1.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5;
}
</SCRIPT>
</form>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Using the TextRange Object document.createRange实例

Javascript 中的 textbox右键菜单

评论 (0) All