一个简单的账号密码输入框

最新推荐文章于 2025-05-28 21:47:59 发布

勇PAN高峰

最新推荐文章于 2025-05-28 21:47:59 发布

阅读量5.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：实例文章标签： jQuery jQuery获取文本

本文链接：https://blog.youkuaiyun.com/sky2714/article/details/51758919

实例专栏收录该内容

2 篇文章

订阅专栏

这是一个展示邮箱登录界面设计的博客。默认情况下，邮箱地址和密码输入框内含有提示文字。当鼠标聚焦到邮箱地址输入框时，提示文字清空。如果在未输入任何内容的情况下直接切换到密码输入框，密码框的提示也会清空，同时邮箱地址的提示恢复。

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

这是邮箱登录界面，默认状态下，邮箱地址文本框和邮箱密码框内分别有 “ 请输入邮箱地址 ” 和 “ 请输入邮箱密码 ” 的提示。当将鼠标聚焦到邮箱地址文本框时，文本框内的 “ 请输入邮箱地址 ” 文字将被清空，效果如图
这里写图片描述
如果此时未在邮箱地址框中输入任何内容，而将鼠标焦点直接聚焦到密码输入框，则会发现密码框内的提示文字被清空了，同时邮箱地址输入框的提示也被还原了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.0.0.min.js"></script>
</head>
<body>
<input type="text" value="请输入邮箱地址:" id="address"><br>
<input type="password" value="请输入密码:" id="password"><br>
<button>登录</button>
<script>
    $("#address").focus(function () {//地址框获得焦点
        var tex_value=$(this).val();//获取当前文本框值
        if(tex_value=="请输入邮箱地址:"){//如果当前文本框值是"请输入邮箱地址:"
            $(this).val("");//清空文本框内容
        }
    });
    $("#address").blur(function () {//地址框失去焦点后
        var tex_value=$(this).val();//获取当前文本框值
        if(tex_value==""){//如果用户没有输入输入任何信息,文本框值为空
           $(this).val("请输入邮箱地址:") ;//再次将输入框设置值为"请输入邮箱地址:"
        }
    });
    $("#password").focus(function () {//密码输入框获取焦点
        var txt_value=$(this).val();//获取当前文本框值
        if(txt_value=="请输入密码:"){//如果文本框值为"请输入密码"
            $(this).val("");//清空文本框内容
        }
    });
    $("#password").blur(function () {//密码框失去焦点
        var txt_value=$(this).val();//获取当前文本框的值
        if(txt_value==""){//如果用户没有输入输入任何信息,文本框值为空
            $(this).val("请输入密码:");//再次将输入框设置值为"请输入密码:"
        }
    })
</script>
</body>
</html>