<html>
<head><title>test</title></head>
<body>
<table>
<tr>
<td><input type = text onclick = ??></td>
</tr>
<tr>
<td><input type = text onclick = ??></td>
</tr>
</table>
</body>
</html>我想要的效果是,鼠标放到输入框内后,就弹出个自己自定义的提示框,最好弄的漂亮点。提示框内显示2行:第一行hello 第二行 tom 即可。
<head><title>test</title></head>
<body>
<table>
<tr>
<td><input type = text onclick = ??></td>
</tr>
<tr>
<td><input type = text onclick = ??></td>
</tr>
</table>
</body>
</html>我想要的效果是,鼠标放到输入框内后,就弹出个自己自定义的提示框,最好弄的漂亮点。提示框内显示2行:第一行hello 第二行 tom 即可。
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>静态自动提示框</title>
<style type="text/css">
<!--
.promptlist{
position:absolute;
background:#fff;
border:1px solid #000;
cursor:pointer;
font-size:14px;
color: #444444;
padding:1px 0px 1px 1px;
-moz-user-select:none;
overflow:auto;
overflow-y:auto;
overflow-x:hidden;
white-space:nowrap;
}
.selectedStyle{background-Color:#0066CC; color:#FFF}
-->
</style>
<script language="javascript">
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}String.prototype.matchOf = function(sValue){
return (this.toUpperCase().indexOf(sValue.toUpperCase()) >= 0);
}function addEvent(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
}function Event(e){
var oEvent = (document.all) ? window.event : e;
if(document.all){
oEvent.target = oEvent.srcElement;
oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
oEvent.pageY = oEvent.clientY + document.body.scrollTop;
}
return oEvent;
}//排序函数
function SetSort(a, b){
if (a.length > b.length) return 1;
else if (a.length == b.length) return a.localeCompare(b);
else return -1;
}
var PromptList = Class.create();
PromptList.prototype = {
initialize: function(arrList, idText, idDiv, iHeight, bShow) {
var oList = this, oText = document.getElementById(idText), oDiv = document.getElementById(idDiv);
this.iIndex = -1;
this.Height = parseInt(iHeight) || 300; //显示的最大高度,设定一个默认最大高度
this.EmptyShow = bShow === true; //空串是否显示
this.Scroll = 0; //是否有滚动条
this.rList = new Array(); //存放结果
this.bHide = true; //判断是否隐藏
this.bSelected = false; //判断是否选择选项
this.aList = arrList.sort(SetSort); //原来数据
oText.autocomplete = "off"; //为了不让系统的自动提示框遮住
oText.onfocus = function(){ oList.Show.call(oList) };
oText.onkeyup = function(e){ oList.Keyup.call(oList, e) };
oText.onkeydown = function(e){ oList.Keydown.call(oList, e) };
//点了滚动条的话onkeyup和onkeydown事件就到了this.oDiv 只能先这样解决
oDiv.onkeyup = function() { oList.oText.onkeyup(); return false };
oDiv.onkeydown = function() { oList.oText.onkeydown(); return false };
oDiv.onselectstart = function() { return false; }; //防止选择
oDiv.onmousedown = function() { oList.bHide = false; }; //
oDiv.onmouseup = function() { oList.CheckClick.call(oList) }; //
addEvent(document, "mousedown", function(){ oList.CheckHide.call(oList) });
this.oText = oText; this.oDiv = oDiv;
},
//判断鼠标是否在选项内点击
CheckClick: function(){
if (this.bSelected) this.Output(); this.bSelected = false;
},
//判断鼠标是否在div内点击 不是就隐藏Div
CheckHide: function(){
if (this.bHide) this.Hide(); this.bHide = true;
},
//隐藏Div
Hide: function(){
this.oDiv.style.display = 'none';
},
//检查Div
CheckDiv: function(){
if (0 < this.oDiv.childNodes.length) { return true; } else { this.Hide(); return false;}
},
//输出
Output: function(){
this.Hide(); if (this.iIndex >= 0) this.oText.value = this.rList[this.iIndex];
},
//显示选项
Show: function(){
this.SetSelect();
if (this.CheckDiv()) {
var oLay = this.oText, oList = this.oDiv, iLeft = oLay.offsetLeft, iTop = oLay.offsetHeight + oLay.offsetTop, iHeight = this.Height, iWidth = oLay.offsetWidth;
oList.style.height = "";
while (oLay.offsetParent) { oLay = oLay.offsetParent; iLeft += oLay.offsetLeft; iTop += oLay.offsetTop; }
with (oList.style) { top = iTop+"px"; left = iLeft+"px"; width = this.oText.offsetWidth+"px"; display = ''; }
//用于设置滚动条
if (iHeight < oList.offsetHeight) {
this.Scroll = oList.offsetHeight; oList.style.height = iHeight+"px";
} else {
this.Scroll = 0;
}
}
},
//高亮选项
ShowSelect: function(newIndex){
if (this.iIndex >= 0) this.oDiv.childNodes[this.iIndex].className = "";
this.oDiv.childNodes[newIndex].className = "selectedStyle";
this.iIndex = newIndex;
},
//设置选项
SetSelect: function(){
var sValue = this.oText.value;
this.iIndex = -1;
this.oDiv.innerHTML = "";
this.rList.length = 0;
if (sValue || this.EmptyShow){
for (var i = 0, n=0, len = this.aList.length; i < len; i++)
if(this.aList[i].matchOf(sValue)) this.Add(n++, i, sValue);
}
},
//插入选项
Add: function(n, i, sValue){
var oList = this, rValue = this.aList[i], oNewDiv = document.createElement("div");
this.rList.push(rValue); oNewDiv.index = n;//添加一个属性存放索引
addEvent(oNewDiv, "mouseup", function(){ oList.bSelected = true; });
addEvent(oNewDiv, "mouseover", function(e){ oList.mouseSelected.call(oList, e) });
oNewDiv.style.width = "100%"; oNewDiv.style.paddingLeft = "3px";
oNewDiv.innerHTML = rValue.replace(new RegExp(sValue, "gi"), "<b>$&</b>");
this.oDiv.appendChild(oNewDiv);
},
//鼠标移动
mouseSelected: function(e){
var oSelected = Event(e).target;
if (oSelected.tagName != "DIV") oSelected = oSelected.parentNode;
var nIndex = oSelected.index;
if (this.iIndex != nIndex) this.ShowSelect(nIndex);
},
//检查按键
Keyup: function(e){
var keyCode = Event(e).keyCode;
if (keyCode != 40 && keyCode != 38 && keyCode != 13) this.Show();
},
//检查按键
Keydown: function(e){
if (this.CheckDiv()) {
var keyCode = Event(e).keyCode;
if (keyCode == 40 || keyCode == 38){ //下上
var oList = this.oDiv, mIndex = oList.childNodes.length - 1, newIndex = this.iIndex, iScroll = this.Scroll;
if (oList.style.display == 'none'){
oList.style.display = ''; newIndex = 0;
}else{
if (keyCode == 40) { if (newIndex == mIndex) return; newIndex++; }
else { if (newIndex == 0) return; newIndex--; }
}
this.ShowSelect(newIndex);
//设置滚动条 只需要在按键时设置就可以
if (iScroll) {
var iHeight = this.Height;
if ((iHeight+oList.scrollTop)*(1+mIndex) < (1+newIndex)*iScroll ) {
oList.scrollTop += iHeight/2;
} else if (oList.scrollTop*(1+mIndex) > newIndex*iScroll ) {
oList.scrollTop -= iHeight/2;
}
}
}else if (keyCode == 13) { this.Output(); this.SetSelect(); }//回车
}
}
};
//对于滚动条的处理还有问题
</script>
</head><body>
<table align="center" width="200" border="1">
<tr><td>
<input type="text" name="keyword" id="keyword" size="30" value=""/>
</td></tr>
</table>
<div id="DivList" class="promptlist" style="display:none;" align="left"> </div>
<script>
var arrList = new Array();
var intIndex=0;
arrList[intIndex++] = "1sdfsdf.m";
arrList[intIndex++] = "111sdafs.net";
arrList[intIndex++] = "b22d1df";
arrList[intIndex++] = "c333a1111sa";
arrList[intIndex++] = "1sdfsdf.m";
arrList[intIndex++] = "111sdafs.net";
arrList[intIndex++] = "b22d1df";
arrList[intIndex++] = "c333a1111sa";
arrList[intIndex++] = "1sdfsdf.m";
arrList[intIndex++] = "111sdafs.net";
arrList[intIndex++] = "b22d1df";
arrList[intIndex++] = "c333a1111sa";
arrList[intIndex++] = "1sdfsdf.m";
arrList[intIndex++] = "111sdafs.net";
arrList[intIndex++] = "b22d1df";
arrList[intIndex++] = "c333a1111sa";
arrList[intIndex++] = "1sdfsdf.m";
arrList[intIndex++] = "111sdafs.net";
arrList[intIndex++] = "b22d1df";
arrList[intIndex++] = "c333a1111sa";
arrList[intIndex++] = "1sdfsdf.m";
arrList[intIndex++] = "111sdafs.net";
arrList[intIndex++] = "b22d1df";
arrList[intIndex++] = "c333a1111sa";
arrList[intIndex++] = "1sdfsdf.m";
arrList[intIndex++] = "111sdafs.net";
arrList[intIndex++] = "b22d1df";
arrList[intIndex++] = "c333a1111sa";
arrList[intIndex++] = "1sdfsdf.m";
arrList[intIndex++] = "111sdafs.net";
arrList[intIndex++] = "b22d1df";
arrList[intIndex++] = "c333a1111sa";
var list = new PromptList(arrList, "keyword", "DivList", 200);
</script>
</body>
</html>很久以前写的
<input type="text" name="textfield" onfocus="aa()" />
</body>
<script language="javascript" type="text/javascript">
function aa(){
alert()
}
</script>想弄好点看
aa()函数里面用
window.open()
另外,2楼的代码根本不是我想要的结果。给我一段suggest的代码干吗?