当前位置:首页 > 前端区域 > 正文内容

账号登陆页,写法记录

寒隙2年前 (2021-03-21)前端区域154

账号登陆页的写法记录,点击账号输入框提示文字消失,未赋值移开后再次显示提示内容。

来源于:腾讯课堂的渡一免费公开课。

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>

演示区域:

账号:

密码:

扫描二维码推送至手机访问。

版权声明:本文由寒日朝阳-精神小窝发布,如需转载请注明出处。

本文链接:https://www.gofortime.com/post/13.html

分享给朋友:

相关文章

资源网站的下载区域

资源网站的下载区域

资源网站下载界面,可以放置于文章内容最后方提供资源下载。来源:2019年壹号测试区红警游戏网站没有下载栏目,简单写的。<body> <strong>下载地址:</strong> &...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。