一个文本框动态提示的例子。在输入的时候实时检查输入正确性,并给出提示。把下面两张图片保存到页面所在文件夹下,将后面的代码保存为html文件即可看到运行效果。图片如下:
https://p-blog.csdn.net/images/p_blog_csdn_net/weoln/EntryImages/20080715/check_right.gif
https://p-blog.csdn.net/images/p_blog_csdn_net/weoln/EntryImages/20080715/error.gif
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
</head>
<style>
.error-msg-div{
background:no-repeat 5px 50% url(error.gif) #FFFCE5 ;
border:1px solid #FF9966;
margin:3px 3px 0px;
padding-left:5px;
color:#F85D00;
font-size:9pt;
font-weight:bold;
text-align:left;
height:20px;
line-height:20px;
text-indent:2em;
display:inline;
}
.success-msg-div{
background:no-repeat 5px 50% url(check_right.gif) ;
margin:3px 3px 0px;
padding-left:5px;
color:#328F27;
font-size:9pt;
font-weight:bold;
text-align:left;
height:20px;
width:20px;
line-height:20px;
text-indent:2em;
display:inline;
}
</style>
<script language="JavaScript">
//弹出错误提示(控件id,[错误信息])
function showInfo(preid,message){
var fdo = document.getElementById(preid);
var ido = document.getElementById(preid+"InfoDiv");
if (typeof message == "undefined") {
fdo.className = "InputPass";
ido.className = "success-msg-div";
ido.innerHTML = " ";
} else {
fdo.className = "InputWarn";
ido.className = "error-msg-div";
ido.innerHTML = message+" ";
}
}
function check(id,value){
if(value.length<1){
showInfo(id,"名称不能为空");
}
else{
showInfo(id);
}
}
</script>
<body>
<input type="text" name="test" class="InputNormal" id="serialIndex"
onChange="check('serialIndex',this.value);"
onBlur="check('serialIndex',this.value);"
onKeyUp="check('serialIndex',this.value);" >
<div id="serialIndexInfoDiv" ></div>
</body>
</html>