通过一个隐藏的下拉框控件实现输入的提示空能，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<input onkeyup="showtips();if(event.keyCode==27)c();" id=txt onkeydown='enterTips()'>(eg. ShanDong)<br>
<select id=sel style='display:none' onclick=rv() onkeydown='if(event.keyCode==13)rv()'></select>
<script>
var msg = new Array("Beijing","Tianjing","Shanghai","Guangdong","ShanDong","Shanxi","Hunan","Hubei");
var msg2=new Array("北京","天津","上海","广东","山东","陕西","湖南","湖北");
function showtips(){
eo=event.srcElement;
sel.length=0;
var len=msg.length;
var re=new RegExp("^"+eo.value,"i")
var j=0
for(i=0;i<len;i++) if(re.test(msg[i])==true){ sel.style.display='';sel.add(new Option(msg[i],msg2[i]));j++}
//下拉框的记录数为1,select控件会出现下拉操作箭头，因此size最小为2
sel.size = (j>1)?j:2;
}
function enterTips(){
e=event.keyCode;
if(sel.style.display!='none'){
if(e==13) event.srcElement.value=sel.value,sel.style.display='none';
if(e==40) sel.focus();
}
}
function rv(){
txt.value=sel.value;
c()
}
function c(){
sel.style.display='none';
txt.focus()
}
document.onclick=function(){
c()
}
</script>
</BODY>
</HTML>
分享到：
相关推荐
Javascript实现的网页文本框输入提示 实现原理： 文本框输入内容后，搜索字符串数组，将匹配内容写入DIV以下拉列表形式展现，并支持方向键选择，效果类似搜索网站的输入提示。 友情提示： 较为粗糙的实现方法，...
纯JavaScript和CSS实现的输入下拉提示
Visual Studio Code插件,实现在导入语句中输入时提示JavaScript/TypeScript模块
JavaScript和CSS实现的输入下拉提示页面
javaScript实现百度搜索提示 在文本框中输入一个a，则会在文本框下方弹出一个选择框，里面放的是查出来的对应的值 很实用的哦 --------java爱好者 java交流群：166256747， 分享自己的技术是一种美德！
用js实现输入提示（自动完成） 附加代码 请放心下载
主要介绍了JavaScript实现横线提示输入验证码随输入验证码输入消失的方法，非常实用，在微信开发中经常会用到，需要的朋友可以参考下
本文实例为大家分享了JavaScript实现随机生成验证码及校验的具体代码，供大家参考，具体内容如下 输入验证码（区分大小写）点击确认，进行校验。出错就弹框提示 点击 看不清 重新随机生成验证码 当验证码输入...
为了更好的达到用户体验度，我们在登录表单时会有一些提示语言，比如说：“请输入用户名”和“请输入密码”等语言，下面小编通过本篇文章给大家分享JavaScript如何实现在密码框中出现提示语，对js密码框提示语相关...
有时候我们需要在登陆表单有一些提示语言，比如“请输入用户名”和“请输入密码”等语言，通过本文给大家介绍JavaScript实现输入框(密码框)出现提示语的相关知识，对js实现输入框提示相关知识感兴趣的朋友一起学习吧
本文通过实例讲解了javascript实现的猜数小嬉戏，嬉戏中用户共有10次猜想机会，并且每次都有不同的提示信息。 Knowledge Point 1: HTML结构 本文实例中使用了基本的HTML结构，包括<!DOCTYPE ...
实现输入提示，自动补全功能，仿照百度，谷歌样式设计。请大家参考，有bug或者问题给我留言。
javascript实现输出指定行数的正方形图案：点击生成图案，会有2个提示框，1，输入图案的组成字符，只能是1个字符哦2，输入正方形行数，路过大于10，会设置为10行数 <!DOCTYPE ...
根据下面需求实现如示意图所示的邮箱输入提示功能，注意，根据要求只需实现下面功能 当用户没有任何输入时，提示框消失 当用户输入字符后，显示提示框，并且把用户输入的内容自动拼上邮箱后缀进行显示 暂时不用...
下面的代码实现当用户停留在text输入框的时候提示输入什么的提示信息，提高用户粘合度。 在输入内容前，显示如图1所示 图1 当用户名的文本框或得焦点时，效果如图2所示 图2 当密码文本框或得焦点时，效果如图3...
当内容为空时，发布按钮为灰色，点击时候文本框会闪动，输入文字会提示还可以输入多少文字，超出会提示，且不能发布，要注意的是，判断文本框内容的长度，不能直接来，因为英文属于一个字节，中文占两个，要用正则...
//获取到input标签框框里面输入的值，是一个字符串 var regExp = new RegExp("^\\w*$","gm");//一定要写上开头^和结尾$不然匹配上后，没办法排除别的，要打上*号，表示可以0个以上匹配的字符 var ismacth=regExp....
输入搜索关键字，仿Google自动提示。