在前台页面应用中,我们在登录窗口等text框中,常常会碰到点击效果的的实现。下面实现的方式很简单也是比较常用的
* 默认灰色,点击后输入黑色。
<html>
<head>
<title>输入框效果实现</title>
</head>
<body>
<input type="text" value="请输入" style="color='ccc'" onClick="this.style.color='black';this.value='';" onBlur="this.style.color=''">
</body>
</html>
例如:在jsp页面中我这样使用
<input type="text" id="loginuserid" name="bean.id" maxlength="40"
value="用户名/邮箱/手机"
οnclick="javascript:if(this.value=='用户名/邮箱/手机'){this.value='';this.style.color='#000'}"
οnblur="javascript:if(this.value==''){this.value='用户名/邮箱/手机';this.style.color='#999'} "
onKeyDown="javascript:if(event.keyCode==13) return submitLoginForm();">
然后效果如下图:
点击后输入则如下: