js 提示层

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head><body><input onblur="Prompt(this)">
<span id="PromptSpan" style="display:none;position:absolute;border:1px red solid;padding:0 3px;background:#fff ">
<input value=""size="20" style="border:0" >
<input type=button value="OK"><input type=button value=X>
</span>
</center>
<script language="javascript">

</script></body></html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html>
<body style="margin:0; padding:100px 150px"><script type="text/javascript" language="javascript">
//判断浏览器
var ie = navigator.appName == "Microsoft Internet Explorer" ? "Microsoft Internet Explorer" : "";//打开页面时focus在输入框内
window.onload = function() {
$('shuru').focus();
}function disable(e) {
//禁止数字以外的输入
if(e.keyCode > 15 && e.keyCode < 48 || e.keyCode > 57) {
ie ? e.returnValue = false : e.preventDefault();
}
}
function convert(e) {
//如果输入的是数字
if(typeof(parseInt($('shuru').value)) == "number") {
$('xianshi').innerHTML = $('shuru').value * 1000;
}
}//简化getElementById为$
var $ = function($) {
    return document.getElementById($);
}
</script><table style="border:1px solid #ccc">
<tr>
     <td><input type="text" size="10" maxlength="10" id="shuru" onkeydown="disable(event)" onkeyup="convert(event)"/></td>
        <td id="xianshi"></td>
    </tr>
</table></body>
</html>演示: http://deepblue.camosun.bc.ca/~cst08017/xzp/disabling/
谢谢楼上的两位, 可是我要的是类似google 搜索时的那种提示层, 是在input框下方提示的,回车或者鼠标可以选择的，不仅提示，而且简化用户输入。
回车就将提示层的内容填入input,或者用鼠标选择也可以。用户不理会提示也可。3楼的效果是，用户已经输完了，才提示，比如要输入128000，输完了才提示。
4楼的能提示，但是没有用，只是提示，不能“鼠标选择或回车选择”主要我不会写弹出提示层（自己定位到input下方），不然就自己改了
<html>
<body>
<script type="text/javascript" language="javascript">
function tip() {
    document.getElementById("keyin").innerHTML = document.getElementById("keyin").value +"000";
    }
}</script>
<div id="bk" style="position:absolute;width:300px;height:100px;">
<input type="text" size="10" maxlength="10" id="keyin" onkeypress="tip()"/>
<div id="tip" style="disible:none;position:absolute;width:300px;height:60px;top:30px;"></div>
</div>
</body>
</html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head><body><input onkeyup="Prompt(this)" onfocus="Prompt(this)">
<span id="PromptSpan" style="display:none;position:absolute;border:1px red solid;padding:0 3px;background:#fff ">
    <input value=""size="20" style="border:0" >
    <input type=button value="OK"><input type=button value=X>
</span>
</center>
<script language="javascript">

</script></body></html>
google用的是ajax技术,加数据库模糊查询.  我用个onchange写一个:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题 1</title>
<script type="text/javascript">
function $(id)
{
return 'string' == typeof id?document.getElementById(id):id;
}
window.onload = function()
{
$('text_input').onchange = function()
{
if(!($('text_input').value == '')||!($('text_input').value == 'null'))
{
var messages = $('text_input').value;
var num = parseInt(messages);
num != typeof 'strint'?$('message').innerHTML = num+'000':alert('NAN');
//alert(messages);
}
}
$('message').onclick = function()
{
$('text_input').value = $('message').innerHTML;
}
}
</script>
</head><body>
<ul>
<li><input onchange="" id="text_input" type="text" /></li>
<li id="message"></li>
</ul>
</body>
</html>
- -  再贴次:
没我上面的好看, 不过效果是一样的. 我懒啊,不喜欢去弄css之类的.
不过我的看起来简单很多.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题 1</title>
<script type="text/javascript">
function $(id)
{
return 'string' == typeof id?document.getElementById(id):id;
}
window.onload = function()
{
$('text_input').onkeyup = function()
{
if(!($('text_input').value == '')||!($('text_input').value == 'null'))
{
var messages = $('text_input').value;
var num = parseInt(messages);
num != typeof 'strint'?$('message').innerHTML = num+'000':alert('NAN');
}
}
$('message').onclick = function()
{
$('text_input').value = $('message').innerHTML;
}
}a
</script>
</head><body>
<ul>
<li><input onchange="" id="text_input" type="text" /></li>
<li id="message"></li>
</ul>
</body>
</html>
你要的是不是自动匹配的例子？
参考一下<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Editable listbox</title>
<style>
/* Common elements */
body{font:small/1.2em arial,helvetica,clean,sans-serif;font:x-small;}
table{font-size:inherit;font:x-small;}/* Options Templates */
.ac_menu{border:1px solid #3162A6;background-color:#F6F6F6;cursor:default;overflow:hidden;-moz-box-sizing:border-box;
height:expression((this.scrollHeight>210)?"210px":"auto")}
.ac_menuitem{width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}
.ac_menuitem_selected{background-color:#D6DEEC;width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}
/* JK */
.minHeightTextarea{
height:expression((this.scrollHeight>150)?"150px":(this.scrollHeight+5)+"px");
overflow : auto;
}
</style><script language=javascript>
var AC_TAB = 9;   // make the selection
var AC_ENTER = 13;   // make the selection
var AC_UP_ARROW = 38;    // move the drop down list selection up by one
var AC_DOWN_ARROW = 40;  // move the drop down list selection down by one
var theListDiv;
var theComboxObj; function AddListDivFun(obj)
{
  //此变量为字符串数组。格式为["深圳","bbb","ccc","ddd"]
  //obj.id得到textarea的id
  var theListArray=eval(obj.ListArray);
  var theListArrayid=eval(obj.ListArrayid);
  //alert("obj:"+obj);
  //alert("obj.id:"+obj.id);
  //alert("theListArray:"+theListArray);
  var tempStr='<DIV style="position:relative;visibility:hidden">'
    +'<DIV class=ac_menu id="'+obj.id+'ListDiv" style="FONT-SIZE: 0.9em; Z-INDEX: 1; visibility:hidden; POSITION: absolute;OVERFLOW-Y:auto; WIDTH:'+obj.offsetWidth+'; " '
    +'onmouseover="mouseOverListDivFun(event)" onmouseout="mouseOutListDivFun(event);" onmousedown="mouseDownListDivFun(event);">';
//alert("obj.id:"+obj.id);
//alert("tempStr:"+tempStr);
//在接收页面通过textarea的ID得到本div textValue的值
  for(var i=0;i<theListArray.length;i++)
   tempStr+='<DIV class=ac_menuitem  value='+i+' id="'+htmlEncode(theListArrayid[i])+'" textValue="'+htmlEncode(theListArray[i])+'">'+htmlEncode(theListArray[i])+'</DIV>';
  tempStr+="</DIV></DIV>";
  //alert("i:"+i);
  //alert("htmlEncode(theListArray[i]):"+htmlEncode(theListArray[i]));
  //alert("tempStr:"+tempStr);
  obj.insertAdjacentHTML("afterEnd",tempStr);
  theListDiv=eval(obj.id+"ListDiv");
  //当对象获得焦点时触发
  obj.onfocus=AC_OnFocus;
  //在对象失去输入焦点时触发
  obj.onblur=AC_OnBlur;
  obj.onpropertychange=AC_OnPropertyChange;
  obj.onkeydown=AC_OnKeyDown;
  obj.autoComplete="off";
}
//当最开始时点机文本框时触发
function AC_OnFocus(obj)
{
  if(obj==null) obj=event.srcElement;
  if(obj.select)obj.select();
  theListDiv=eval(obj.id+"ListDiv");
  theComboxObj=obj;
  theListDiv.style.visibility="visible";
  adjustListDivScroll();
}
//在对象失去输入焦点时触发
function AC_OnBlur(obj)
{
  if(obj==null) obj=event.srcElement;
  if(theListDiv.contains(document.activeElement)) obj.focus();
  else theListDiv.style.visibility="hidden";
} function AC_OnPropertyChange(obj)
{
//alert("bb");
  if(theListDiv==null) return ;
  if(obj==null) obj=event.srcElement;
  theListDiv.selectedIndex=-1;
  var theFirstVisibleIndex=-1;
  //当输入的文本域内容改变时得到的值
  var objValue=obj.value;
  //alert("objValue1:"+objValue);
  for(var i=0;i<theListDiv.children.length;i++)
  {
   if(theListDiv.children[i].textValue.indexOf(objValue)==0)
   {
    if(theFirstVisibleIndex==-1) theFirstVisibleIndex=i;
    theListDiv.children[i].className="ac_menuitem";
    theListDiv.children[i].style.display="";
    theListDiv.children[i].innerHTML="<b>"+htmlEncode(objValue)+"</b>"+htmlEncode(theListDiv.children[i].textValue.substr(objValue.length));
}
   else
    theListDiv.children[i].style.display="none";
   if(theListDiv.selectedIndex==-1 && theListDiv.children[i].textValue==objValue) theListDiv.selectedIndex=i;
  }
  if(theListDiv.selectedIndex==-1 && theFirstVisibleIndex!=-1)
  {
   theListDiv.selectedIndex=theFirstVisibleIndex;
  }
  if(theListDiv.selectedIndex!=-1) theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem_selected";
  adjustListDivScroll();
} function AC_OnKeyDown(obj)
{
  if(theListDiv==null) return ;
  if(obj==null) obj=event.srcElement;
  var keyCode=event.keyCode;
  if(keyCode==AC_ENTER) keyCode=event.keyCode=AC_TAB;
  if(keyCode==AC_TAB && theListDiv.selectedIndex!=-1)
  {
   obj.value=theListDiv.children[theListDiv.selectedIndex].textValue;
   document.Compose.hiddenid.value=theListDiv.children[theListDiv.selectedIndex].id;   return ;
  }  if(keyCode==AC_UP_ARROW && theListDiv.selectedIndex!=-1)
  {
   for(var i=theListDiv.selectedIndex-1;i>-1;i--)
   {
    if(theListDiv.children[i].style.display!="none")
    {
     theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem";
     theListDiv.selectedIndex=i;
     theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem_selected";
     adjustListDivScroll();
     break;
    }
   }
  }  if(keyCode==AC_DOWN_ARROW && theListDiv.selectedIndex!=-1)
  {
   for(var i=theListDiv.selectedIndex*1+1;i<theListDiv.children.length;i++)
   {
    if(theListDiv.children[i].style.display!="none")
    {
     theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem";
     theListDiv.selectedIndex=i;
     theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem_selected";
     adjustListDivScroll();
     break;
    }
   }
   return;
  } } function htmlEncode(str)
{
  if(str==null) return "";
  str=str.replace(/</ig,"<")
  str=str.replace(/>/ig,">");
  str=str.replace(/"/ig,""");
  return str;
}
//当用户将鼠标指针移动到对象内时触发
function mouseOverListDivFun(event)
{
  if(event.toElement!=theListDiv) event.toElement.style.backgroundColor="#E6E6E6";
}
//当用户将鼠标指针移出对象边界时触发
function mouseOutListDivFun(event)
{
  if(event.fromElement!=theListDiv) event.fromElement.style.backgroundColor="";
}
//当用户用鼠标按钮单击对象时触发。
function mouseDownListDivFun(event)
{
  var selectedStr="";
  if(event.srcElement==theListDiv){   return;}
   else if(event.srcElement.tagName=="B") {selectedStr=event.srcElement.parentElement.textValue;}  else {selectedStr=event.srcElement.textValue;
   document.Compose.hiddenid.value=event.srcElement.id;
}
  theComboxObj.value=selectedStr;
  theComboxObj.blur();
}
function adjustListDivScroll()
{
  if ( theListDiv==null || theListDiv.selectedIndex==-1 ) return ;
  var i=theListDiv.selectedIndex;
  if((theListDiv.children[i].offsetTop<theListDiv.scrollTop)||(theListDiv.children[i].offsetTop>theListDiv.scrollTop+200))
   theListDiv.scrollTop=theListDiv.children[i].offsetTop-95;
} onload=function(){
   AddListDivFun(document.all.tofield);
}
</script>
</head>
<body >
  <table cellpadding=4 cellspacing=0 border=0 width="500">
    <tr>
      <td >自动匹配输入框：</td>
      <td style="padding-top:0px;" > <input name="To" class="minHeightTextarea" style="width:300" tabindex="1" id="tofield"
rows="1"  title="textarea" cols="20" ListArray=tofieldListArray ListArrayid=tofieldListArrayid></td>
<script language=javascript>
var tofieldListArray=["深圳","bbb","ccc","ddd"];
var tofieldListArrayid=["1","2","3","4"];
//alert(tofieldListArray);
</script>
    </tr>
  </table>
</body>
</html>