账号登陆页,写法记录
账号登陆页的写法记录,点击账号输入框提示文字消失,未赋值移开后再次显示提示内容。
来源于:腾讯课堂的渡一免费公开课。
BUG:当账号框内输入“请输入用户名”时,第二次点击将清空。如果账号框内为其他,比如“123”,则二次点击时不清空。
<form method="get" action=""> <p> 账号: <input type="text" name="username" <!--设置文字提示--> value="请输入用户名" style="color: #999;" <!--当聚焦在输入框内时,文字提示消失--> onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" <!--如果取消聚焦时,账号框内无值,则将文字提示再次显示--> onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}"> </p> <p> 密码:<input type="password" name="username"> </p> <input type="submit" value="立即登陆"> </form>
演示区域: