文本框默认提示灰色，点击后输入黑色

最新推荐文章于 2023-01-30 11:31:53 发布

原创最新推荐文章于 2023-01-30 11:31:53 发布 · 8.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #input #手机 #jsp #html

前台页面常见应用笔记专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种常见的网页登录界面中输入框点击效果实现方法。通过HTML和JavaScript，使输入框默认显示灰色提示文字，用户点击后变为可编辑状态并清空默认文字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前台页面应用中，我们在登录窗口等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="用户名/邮箱/手机"
   onclick="javascript:if(this.value=='用户名/邮箱/手机'){this.value='';this.style.color='#000'}"
   onblur="javascript:if(this.value==''){this.value='用户名/邮箱/手机';this.style.color='#999'} "
    onKeyDown="javascript:if(event.keyCode==13) return submitLoginForm();">

然后效果如下图：