本文介绍了一种使用JavaScript增强表单用户体验的方法，通过鼠标悬停实现输入框的自动聚焦与选择，以及防止表单重复提交的功能。
当我们用鼠标经过输入框时，不用鼠标点击、亦不用右键全选，就可以得到文本框的焦点（选中文字）。另外，为了防止重复提交，当访客点击了提交以后，按钮变为灰色，实际代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>更智能人性化的表单 - 烈火学院 Liehuo.Net</title>
<!-- 脚本部分 -->
<script type="text/javascript">
function $(str){ return(document.getElementById(str)); }
function check_submit(){
if($("txt_user_name").value==""){ alert("请填写用户名"); return(false); }
if($("txt_user_pass").value==""){ alert("请填写密码"); return(false); }
if($("txt_user_pass_confirm").value==""){ alert("请填写确认密码"); return(false); }
$("submit_button").disabled=true;
return(false);
}
function mover(){
event.srcElement.focus();
event.srcElement.select();
}
function mclick(){
if(event.srcElement.value=="[请输入用户名]")event.srcElement.value="";
}
function mblur(){
if(event.srcElement.value=="")event.srcElement.value="[请输入用户名]";
}
// 烈火網 liehuo.net 真诚的欢迎复制转载，因为互联网是复制出来的，我们拒绝恶意采集 ｌｉｅhｕｏ.ｎｅｔ
</script>
</head>
<body style="overflow:auto;">
<form action="" onsubmit="return check_submit();">
用户名：<br>
<input id="txt_user_name" onmouseover="mover();"
onclick="mclick();" onblur="mblur();" value="[请输入用户名]"><br>
密码：<br>
<input id="txt_user_pass" type="password" onmouseover="mover();" value="默认密码"><br>
确认密码：<br>
<input id="txt_user_pass_confirm" type="password" onmouseover="mover();" value="默认密码"><br>
<input type="submit" value="提交" id="submit_button">
</form>
</body>
</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
扫一扫
1631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
